按钮
Neon gradient button with glow effect and thick border
- 基础骨架
font-bold rounded-xl transition-all duration-300- 变体
- 主要、次要、渐变、图标
- 状态
- hover、active、disabled
霓虹渐变组件配方
font-bold rounded-xl transition-all duration-300 bg-gradient-to-r from-cyan-400 to-pink-500 text-white border-2 border-white/20 shadow-[0_0_20px_rgba(236,72,153,0.5)] hover:shadow-[0_0_30px_rgba(236,72,153,0.7)] hover:scale-105 active:scale-[0.98]卡片
Gradient-filled card with thick colored border and glow
- 基础骨架
rounded-2xl md:rounded-3xl border-4 transition-all duration-300- 变体
- 紫粉、青绿、粉红、黄绿
- 状态
- hover
输入框
Dark background input with glowing border on focus
- 基础骨架
w-full px-5 py-4 bg-white/5 border-2 border-purple-500/50 rounded-xl text-white placeholder:text-white/40 focus:outline-none transition-all duration-300- 变体
- 默认、带按钮
- 状态
- focus、disabled
导航栏
Dark transparent navigation with blur and gradient CTA
- 基础骨架
bg-[#0f0a1e]/80 backdrop-blur-xl border border-purple-500/20 px-4 md:px-8 py-4- 变体
- 默认
- 状态
- 静态
徽章
Dashed border badge with star decorations
- 基础骨架
inline-flex items-center gap-2 px-4 py-2 border-2 border-dashed rounded-full text-sm font-medium- 变体
- 黄色、青色、粉色
- 状态
- 静态
漂浮卡片
Rotated floating card for hero sections
- 基础骨架
rounded-2xl border-4 p-5 absolute- 变体
- 紫粉、青绿、粉红
- 状态
- 静态
装饰元素
Animated decorative icons for backgrounds
- 基础骨架
absolute- 变体
- 星星、火箭、闪光
- 状态
- 静态