按钮
Outrun retrowave button with neon glow, bold sans-serif and sunset gradient aesthetic
- 基础骨架
font-bold uppercase tracking-widest rounded-lg transition-all duration-300 ease-in-out- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
Outrun 复古未来组件配方
font-bold uppercase tracking-widest rounded-lg transition-all duration-300 ease-in-out bg-gradient-to-r from-[#ff006e] to-[#a020f0] text-white shadow-[0_0_16px_rgba(255,0,110,0.5)] md:shadow-[0_0_24px_rgba(255,0,110,0.5)] hover:shadow-[0_0_32px_rgba(0,212,255,0.7)] hover:scale-105 active:scale-95卡片
Dark retro-futuristic card with neon magenta border glow and outrun palette
- 基础骨架
bg-[#0a0a0a]/80 rounded-lg border border-[#ff006e]/50 shadow-[0_0_16px_rgba(255,0,110,0.4)] md:shadow-[0_0_24px_rgba(255,0,110,0.4)] transition-all duration-300 ease-in-out- 变体
- 默认、青色、日落
- 状态
- hover
输入框
Neon-glow input on dark surface with outrun retrowave color scheme
- 基础骨架
w-full rounded-lg border border-[#a020f0]/50 bg-[#0a0a0a]/60 text-[#00d4ff] placeholder:text-[#a020f0]/50 focus:outline-none transition-all duration-300 ease-in-out- 变体
- 默认、霓虹
- 状态
- focus、disabled
霓虹发光面板
Dark panel with animated neon border glow effect
- 基础骨架
relative bg-[#0a0a0a]/90 rounded-lg border p-6- 变体
- 品红、青色、紫色
- 状态
- 静态
铬合金文字
Metallic chrome gradient text with reflective shine effect
- 基础骨架
font-bold uppercase tracking-widest bg-gradient-to-b from-white via-[#c0c0c0] to-[#808080] bg-clip-text text-transparent- 变体
- 默认
- 状态
- 静态
日落进度条
Progress bar with sunset gradient colors and neon glow
- 基础骨架
relative h-3 bg-[#0a0a0a] rounded-full border border-[#a020f0]/30 overflow-hidden- 变体
- 默认
- 状态
- 静态
霓虹开关
Toggle switch with neon glow effect when active
- 基础骨架
relative w-14 h-7 bg-[#0a0a0a] border border-[#a020f0]/50 rounded-full transition-all duration-300- 变体
- 默认
- 状态
- active
VHS徽章
Retro VHS-style badge with tracking lines effect
- 基础骨架
inline-flex items-center gap-1 px-3 py-1 bg-[#0a0a0a] border border-[#ff006e]/50 font-mono text-xs uppercase text-[#ff006e]- 变体
- 录制、播放、暂停
- 状态
- 静态
网格分隔线
Horizontal divider with perspective grid pattern
- 基础骨架
relative h-24 overflow-hidden- 变体
- 默认
- 状态
- 静态