按钮
Japanese woodblock print inspired button with strong outlines and flat color fills
- 基础骨架
font-bold tracking-wider rounded-sm border-2 transition-all duration-300 ease-in-out- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
浮世绘数字风组件配方
font-bold tracking-wider rounded-sm border-2 transition-all duration-300 ease-in-out bg-[#d4553a] text-[#f5f0e1] border-[#1a3055] shadow-[3px_3px_0px_#1a3055] hover:shadow-[4px_4px_0px_#1a3055] hover:-translate-y-0.5 active:shadow-[1px_1px_0px_#1a3055] active:translate-y-0.5卡片
Woodblock print style card with strong outlines and flat color areas
- 基础骨架
bg-[#f5f0e1] rounded-sm border-2 border-[#1a3055] shadow-[4px_4px_0px_#1a3055] transition-all duration-300 ease-in-out- 变体
- 默认、朱红、金叶
- 状态
- hover
输入框
Woodblock print inspired input with strong outlines on rice paper background
- 基础骨架
w-full rounded-sm border-2 border-[#1a3055]/60 bg-[#f5f0e1] text-[#1a3055] placeholder:text-[#1a3055]/40 focus:outline-none transition-all duration-300 ease-in-out- 变体
- 默认、朱红
- 状态
- focus、disabled
木版画面板
Panel with woodblock print aesthetic and strong border outlines
- 基础骨架
relative bg-[#f5f0e1] border-3 border-[#1a3055] p-6- 变体
- 默认、靛蓝
- 状态
- 静态
印章
Traditional Japanese hanko (name seal) style badge
- 基础骨架
inline-flex items-center justify-center w-12 h-12 bg-[#d4553a] border-2 border-[#8b1a1a] rounded-sm text-[#f5f0e1] font-bold text-lg transform rotate-[-5deg]- 变体
- 默认
- 状态
- 静态
波浪分隔线
Decorative divider inspired by ukiyo-e wave patterns
- 基础骨架
relative w-full h-8 overflow-hidden- 变体
- 默认
- 状态
- 静态
墨迹进度条
Progress bar with brush stroke ink effect
- 基础骨架
relative h-4 bg-[#f5f0e1] border-2 border-[#1a3055]- 变体
- 靛蓝、朱红
- 状态
- 静态
季节标签
Tab component with seasonal color themes
- 基础骨架
px-4 py-2 font-bold tracking-wider border-3 transition-all duration-200- 变体
- 春、夏、秋、冬
- 状态
- active
毛笔标题
Heading with brush stroke underline decoration
- 基础骨架
relative inline-block font-bold text-2xl text-[#1a3055] pb-2- 变体
- 默认
- 状态
- 静态
层叠山峦
Decorative background element with layered mountain silhouettes
- 基础骨架
relative w-full h-32 overflow-hidden- 变体
- 默认
- 状态
- 静态