按钮
Sharp-edged button with katana slash corner marks and dual-color neon glow
- 基础骨架
relative font-sans font-bold uppercase tracking-widest border border-[#dc2626]/60 transition-all duration-300 ease-in-out- 变体
- 主要、次要、强调、双色辉光
- 状态
- hover、active、disabled
霓虹武士风组件配方
relative font-sans font-bold uppercase tracking-widest border border-[#dc2626]/60 transition-all duration-300 ease-in-out bg-[#dc2626] text-white shadow-[0_0_15px_rgba(220,38,38,0.5)] hover:shadow-[0_0_25px_rgba(56,189,248,0.5)] hover:border-[#dc2626] active:scale-95 active:shadow-[0_0_8px_rgba(220,38,38,0.4)]卡片
Armor-plate styled card with angular clip-path and neon edge glow
- 基础骨架
relative bg-[#080818] border border-[#dc2626]/30 transition-all duration-300 ease-in-out- 变体
- 默认、霓虹红、霓虹紫、双色辉光
- 状态
- hover
输入框
Brush-stroke underline input with dual-color neon glow focus
- 基础骨架
w-full border-2 border-[#dc2626]/30 bg-transparent text-white placeholder:text-white/25 font-sans focus:outline-none transition-all duration-300 ease-in-out- 变体
- 默认、霓虹、紫色
- 状态
- focus、disabled
刀斩分割线
Decorative divider with diagonal slash line and neon glow, evoking a katana cut
- 基础骨架
relative w-full h-3 my-6 rotate-[-2deg] bg-[linear-gradient(105deg,#e2e8f0_0%,#94a3b8_30%,#e2e8f0_50%,#64748b_70%,#e2e8f0_100%)] [clip-path:polygon(0_30%,10%_60%,20%_20%,30%_50%,40%_10%,50%_40%,60%_5%,70%_35%,80%_15%,90%_45%,100%_25%,100%_75%,90%_55%,80%_85%,70%_65%,60%_95%,50%_60%,40%_90%,30%_50%,20%_80%,10%_40%,0_70%)] transition-all duration-300 ease-in-out- 变体
- 赤红、紫色、蓝色
- 状态
- hover
家纹徽章
Circular badge styled like a Japanese family crest with neon outline
- 基础骨架
inline-flex items-center justify-center rounded-full border-2 outline outline-2 outline-offset-4 shadow-[0_0_0_6px_#080818,0_0_0_8px_currentColor] bg-[radial-gradient(circle,transparent_30%,currentColor_31%,currentColor_33%,transparent_34%)] transition-all duration-300 ease-in-out- 变体
- 火、水、风
- 状态
- hover
道场面板
Panel with traditional dojo aesthetic and neon accents
- 基础骨架
relative bg-[#1a0f0a] bg-[repeating-linear-gradient(180deg,transparent,transparent_12px,rgba(139,90,43,0.08)_12px,rgba(139,90,43,0.08)_24px)] border border-[#dc2626]/20 border-4 border-[#dc2626]/30 transition-all duration-300 ease-in-out- 变体
- 默认、战斗、冥想
- 状态
- hover
武士道警告
Alert box with samurai honor code aesthetic and neon accents
- 基础骨架
relative border-4 border-2 border-[#dc2626]/20 bg-[#080818]/90 font-serif tracking-[0.15em] before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-px before:bg-gradient-to-r before:from-transparent before:via-[#dc2626]/30 before:to-transparent transition-all duration-300 ease-in-out p-4 md:p-6- 变体
- 荣誉、警告、败北
- 状态
- hover
刀刃进度条
Progress bar styled like a katana blade being drawn from its sheath
- 基础骨架
relative w-full h-2 bg-[#080818] border border-[#dc2626]/20 overflow-hidden shadow-[inset_0_1px_3px_rgba(0,0,0,0.5)] transition-all duration-300 ease-in-out- 变体
- 钢铁、烈焰、雷电
- 状态
- hover