Get a free, modern code snippet for a luxury Thank You card featuring interactive star ratings using Tailwind CSS and JavaScript.
Free Dairy Farm Website TemplateTable of Contents
When a customer finishes a purchase, the "Thank You" page is your last chance to make a great impression. A boring page is a missed opportunity. Today, we are building a Premium Boutique Thank You Card that features a modern "glassmorphism" look, gold accents, and a working star-rating system.
This design is perfect for high-end brands, digital agencies, or boutique shops that want to look professional and "handcrafted."
Prerequisites
To use this code, you only need:
- A basic understanding of HTML5.
- Tailwind CSS (linked via CDN in this example).
- Google Fonts (Cormorant Garamond and Plus Jakarta Sans).
Source Code
Step 1 (HTML Code):
We start with a semantic HTML5 layout. We use a container to center the card on the screen and a main div to act as our "Glass Card." We also include SVG icons for the stars to keep the project lightweight without needing external image files.
Step 2 (CSS Code):
While most of the styling is handled by Tailwind classes, we use a small style block for the "Premium" effects. This includes the Mesh Background (the soft glow in the corners) and the Glassmorphism effect (the blurry, see-through card).
:root {
--gold: #d4af37;
--dark: #0f0f0f;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: #0c0c0c;
color: #fff;
}
.serif {
font-family: 'Cormorant Garamond', serif;
}
.mesh-bg {
background-image: radial-gradient(
at 0% 0%,
hsla(253, 16%, 7%, 1) 0,
transparent 50%
),
radial-gradient(at 100% 100%, hsla(38, 30%, 12%, 1) 0, transparent 50%);
}
.glass-card {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%
);
backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.star-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.star-btn.active {
color: var(--gold) !important;
filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
}
.gold-border-gradient {
background: linear-gradient(to bottom, var(--gold), transparent);
} Step 3 (JavaScript Code):
To make the card feel alive, we add a simple JavaScript script. This script listens for "hover" and "click" events on the stars. When a user clicks a star, it "locks" the rating and provides a small scale-up animation for haptic-style feedback.
const stars = document.querySelectorAll('.star-btn');
let currentRating = 0;
stars.forEach((star) => {
// Hover Preview
star.addEventListener('mouseenter', () => {
const value = parseInt(star.getAttribute('data-value'));
highlightStars(value);
});
// Reset to current selection on Mouse Leave
star.addEventListener('mouseleave', () => {
highlightStars(currentRating);
});
// Set Rating on Click
star.addEventListener('click', () => {
currentRating = parseInt(star.getAttribute('data-value'));
highlightStars(currentRating);
// Haptic-like feedback animation
star.classList.add('scale-125');
setTimeout(() => star.classList.remove('scale-125'), 150);
});
});
function highlightStars(count) {
stars.forEach((s) => {
const val = parseInt(s.getAttribute('data-value'));
if (val <= count) {
s.classList.add('active');
} else {
s.classList.remove('active');
}
});
}Final Output:
Conclusion:
A great user experience (UX) is all about the small details. By adding gold gradients, smooth hover effects, and a glass-like finish, you turn a simple "Thank You" message into a premium brand moment.
Feel free to copy the code above and tweak the colors to match your brand!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
