按钮
Bold comic-book button with thick black border, flat color fill and hard offset shadow
- 基础骨架
font-black uppercase tracking-wider border-4 border-black rounded-lg transition-all duration-150- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
波普艺术组件配方
font-black uppercase tracking-wider border-4 border-black rounded-lg transition-all duration-150 bg-[#ffdd00] text-black shadow-[4px_4px_0_#000] hover:shadow-[6px_6px_0_#000] hover:-translate-x-0.5 hover:-translate-y-0.5 active:shadow-[2px_2px_0_#000] active:translate-x-0.5 active:translate-y-0.5卡片
Comic-style card with thick border, hard shadow, and optional Ben-Day dot background
- 基础骨架
bg-white border-4 border-black rounded-lg transition-all duration-150- 变体
- 默认、粉色、蓝色
- 状态
- hover
输入框
Bold input with thick black border and colored focus shadow
- 基础骨架
w-full bg-white border-4 border-black rounded-lg font-bold text-black placeholder:text-gray-400 focus:outline-none transition-all duration-150- 变体
- 默认、粉色
- 状态
- focus、disabled
半色调卡片
Card with halftone dot pattern background and bold pop-art borders
- 基础骨架
bg-white border-4 border-black rounded-lg bg-[radial-gradient(circle,#00000020_2px,transparent_2px)] bg-[size:12px_12px] shadow-[8px_8px_0_#000] transition-all duration-150- 变体
- 默认、红色、蓝色、黄色
- 状态
- hover
粗体标题
Large bold caption text container with pop-art styling
- 基础骨架
font-black uppercase tracking-tight [--webkit-text-stroke:2px_#000] text-2xl md:text-4xl leading-tight transition-all duration-150- 变体
- 默认、轮廓、阴影
- 状态
- 静态
爆炸徽章
Comic-style explosion badge with starburst shape
- 基础骨架
inline-flex items-center justify-center font-black uppercase [clip-path:polygon(50%_0%,61%_18%,79%_2%,74%_22%,97%_18%,83%_35%,100%_50%,83%_65%,97%_82%,74%_78%,79%_98%,61%_82%,50%_100%,39%_82%,21%_98%,26%_78%,3%_82%,17%_65%,0%_50%,17%_35%,3%_18%,26%_22%,21%_2%,39%_18%)] transition-all duration-150- 变体
- 哇、砰、嘭
- 状态
- hover