Build a referral call-to-action with Tailwind CSS. Use a max-w-3xl rounded-2xl card with a neutral-900 left rail on md and up carrying a rotated or stacked label, or simply a two-part layout: a top block with a gift-like glyph tile, a heading reading "Give a month, get a month", and a supporting line explaining both sides get credit. Below, a copy row: a bordered rounded-xl field showing the referral URL in monospace with the domain part muted, and a dark Copy button on the right that swaps to a green Copied state. Under the row, three small share buttons for email, X and LinkedIn drawn as bordered pills with glyphs. Then a progress block: a label with invites accepted out of five, a thin neutral-100 track with a neutral-900 fill at forty percent, and a muted line saying two more unlock the next reward. Then add JavaScript that copies the link, flips the button state for two seconds, and selects the field text on click.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a referral call-to-action with Tailwind CSS. Use a max-w-3xl rounded-2xl card with a neutral-900 left rail on md and up carrying a rotated or stacked label, or simply a two-part layout: a top block with a gift-like glyph tile, a heading reading "Give a month, get a month", and a supporting line explaining both sides get credit. Below, a copy row: a bordered rounded-xl field showing the referral URL in monospace with the domain part muted, and a dark Copy button on the right that swaps to a green Copied state. Under the row, three small share buttons for email, X and LinkedIn drawn as bordered pills with glyphs. Then a progress block: a label with invites accepted out of five, a thin neutral-100 track with a neutral-900 fill at forty percent, and a muted line saying two more unlock the next reward. Then add JavaScript that copies the link, flips the button state for two seconds, and selects the field text on click.
var field = document.getElementById("referralField");
var btn = document.getElementById("referralCopy");
function flash() {
btn.textContent = "Copied";
btn.classList.add("bg-green-600", "hover:bg-green-600");
setTimeout(function () {
btn.textContent = "Copy link";
btn.classList.remove("bg-green-600", "hover:bg-green-600");
}, 2000);
}
btn.addEventListener("click", function () {
navigator.clipboard.writeText(field.value).then(flash, function () {
// Clipboard API can be blocked; selecting the text still lets people copy.
field.select();
});
});
field.addEventListener("click", function () {
field.select();
});
