Build a complete HTML file with TailwindCSS + custom CSS. The page should display five futuristic pill-shaped neon buttons on a dark gradient background. Design Requirements Background: dark-to-black gradient with subtle glowing grid overlay. Buttons: pill-shaped (true modern capsule silhouette), matte black interior, bold neon-colored text. Border: continuously rotating RGB trail with no pauses or snapping. Implement the border with a conic-gradient and a CSS custom property --a. Use @property to declare --a and animate it with
@keyframes
border-spin { from { --a:0turn } to { --a:1turn } }. Mask the gradient so only a clean, even stroke follows the capsule outline (no bleeding glow). Example core CSS that MUST be used: @property --a { syntax: '<angle>'; inherits: false; initial-value: 0turn; }
@keyframes
border-spin { from { --a: 0turn; } to { --a: 1turn; } } .neon-button::before { --a: 0turn; content:""; position:absolute; inset:0; border-radius:9999px; padding:3px; /* border thickness */ background: conic-gradient(from var(--a), rgba(255,0,0,.9), rgba(255,165,0,.9), rgba(255,255,0,.9), rgba(0,255,255,.9), rgba(128,0,128,.9), rgba(255,0,0,.9) ); animation: border-spin 3s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; } Hover effects: slight lift and soft glow. Active state: gentle press-down. Glow layer: add a subtle blurred drop-shadow behind each button matching its color theme. Variants: 5 buttons with different border palettes: cyan, purple, green, orange/red, and pink. Layout: center the buttons in a flex container; wrap responsively on smaller screens. Keep the entire project self-contained in one HTML file, no external CSS needed. - Initial Deployment
2be25fd
verified