按钮
Cyberpunk-infused Chinese button with neon accents, vermilion tones and angular design
- 基础骨架
font-bold tracking-wider rounded-none border transition-all duration-300 ease-in-out- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
赛博中华风组件配方
font-bold tracking-wider rounded-none border transition-all duration-300 ease-in-out bg-[#d4553a] text-white border-[#c9a227] shadow-[0_0_16px_rgba(212,85,58,0.5)] hover:shadow-[0_0_24px_rgba(201,162,39,0.6)] hover:border-[#c9a227] active:scale-95卡片
Cyberpunk Chinese card with neon border glow and traditional-meets-futuristic palette
- 基础骨架
bg-[#0a0a0a]/90 rounded-none border border-[#d4553a]/40 shadow-[0_0_16px_rgba(212,85,58,0.3)] transition-all duration-300 ease-in-out- 变体
- 默认、霓虹、金色
- 状态
- hover
输入框
Cyberpunk Chinese input with angular design and neon focus states
- 基础骨架
w-full rounded-none border border-[#c9a227]/40 bg-[#0a0a0a]/80 text-[#00d4ff] placeholder:text-[#c9a227]/40 focus:outline-none transition-all duration-300 ease-in-out- 变体
- 默认、朱红
- 状态
- focus、disabled
灯笼徽章
Badge styled like a Chinese lantern with neon glow
- 基础骨架
inline-flex items-center justify-center rounded-[15%_15%_40%_40%] border-2 transition-all duration-300 ease-in-out- 变体
- 红色、金色、翡翠
- 状态
- hover
龙纹卷轴
Scroll-shaped panel with dragon motif border and neon accents
- 基础骨架
relative bg-[#0a0a0a]/90 border border-[#c9a227]/30 rounded-sm before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-1 before:bg-gradient-to-r before:from-transparent before:via-[#c9a227]/50 before:to-transparent after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-1 after:bg-gradient-to-r after:from-transparent after:via-[#c9a227]/50 after:to-transparent transition-all duration-300 ease-in-out- 变体
- 默认、帝王、翡翠
- 状态
- hover
印章
Square seal/stamp badge in Chinese chop style with neon glow
- 基础骨架
inline-flex items-center justify-center border-2 rounded-none font-bold rotate-[-2deg] shadow-[inset_1px_1px_0_rgba(255,255,255,0.1),inset_-1px_-1px_0_rgba(0,0,0,0.2)] transition-all duration-300 ease-in-out- 变体
- 红色、金色、翡翠
- 状态
- hover
宝塔面板
Panel with pagoda-inspired tiered header and neon accents
- 基础骨架
relative bg-[#0a0a0a]/90 border border-[#c9a227]/25 rounded-none before:content-[''] before:absolute before:top-0 before:left-[10%] before:right-[10%] before:h-1 before:bg-gradient-to-r before:from-transparent before:via-[#c9a227]/60 before:to-transparent transition-all duration-300 ease-in-out- 变体
- 默认、帝王、夜色
- 状态
- hover
祥云纹饰
Decorative divider with traditional Chinese cloud pattern styling
- 基础骨架
relative w-full h-px my-6 before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2 before:-top-1.5 before:w-8 before:h-3 before:rounded-[50%_50%_50%_50%/60%_60%_40%_40%] before:shadow-[12px_-1px_0_4px_currentColor/10,-12px_-1px_0_4px_currentColor/10] transition-all duration-300 ease-in-out- 变体
- 默认、金色、翡翠
- 状态
- hover