按钮
Bold button with hard-edge shadow and hover displacement
- 基础骨架
font-black border-2 md:border-4 border-black rounded-none transition-all duration-200- 变体
- 主要、次要、强调、轮廓
- 状态
- hover、active、disabled
新野兽派组件配方
font-black border-2 md:border-4 border-black rounded-none transition-all duration-200 bg-[#ff006e] text-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] md:hover:translate-x-1 md:hover:translate-y-1 active:translate-x-[4px] active:translate-y-[4px]卡片
Container with black border and hard-edge shadow
- 基础骨架
bg-white border-2 md:border-4 border-black rounded-none transition-all duration-300- 变体
- 默认、强调、扁平
- 状态
- hover
输入框
Form input with sharp borders and focus shadow
- 基础骨架
w-full border-2 md:border-4 border-black rounded-none bg-white font-mono focus:outline-none transition-shadow- 变体
- 默认、填充
- 状态
- focus、disabled
标题
Bold heading with sharp typography
- 基础骨架
font-black tracking-tight leading-tight- 变体
- 默认、反色、强调
- 状态
- 静态
徽章
Small label with brutal styling
- 基础骨架
inline-block font-black text-xs md:text-sm uppercase tracking-wider border-2 border-black rounded-none- 变体
- 默认、强调、轮廓
- 状态
- 静态
导航栏
Top navigation bar with black complete border
- 基础骨架
bg-white border-2 md:border-4 border-black px-4 md:px-8 py-3 md:py-4- 变体
- 默认、反色
- 状态
- 静态