按钮
Dynamic offset button with sharp edges and hover displacement
- 基础骨架
font-bold uppercase tracking-widest transition-all duration-200- 变体
- 主要、次要、强调
- 状态
- hover、active、disabled
非对称网格组件配方
font-bold uppercase tracking-widest transition-all duration-200 bg-[#0f0f0f] text-white hover:-translate-x-1 hover:-translate-y-1 hover:shadow-[4px_4px_0px_#ff3366] hover:-translate-x-1 hover:-translate-y-1 active:translate-x-0 active:translate-y-0 active:shadow-none卡片
Irregular card with rotation and overlap capability
- 基础骨架
relative bg-white border-2 border-[#0f0f0f] transition-transform duration-300- 变体
- 默认、深色、强调
- 状态
- hover、active、disabled
输入框
Sharp-edged input with offset focus styling
- 基础骨架
w-full bg-transparent border-2 border-[#0f0f0f] text-[#0f0f0f] placeholder:text-gray-400 focus:outline-none focus:border-[#ff3366] transition-colors duration-200- 变体
- 默认、反色
- 状态
- focus、disabled
网格区块
Asymmetric grid section with unequal columns
- 基础骨架
grid grid-cols-12 gap-4 min-h-screen p-8- 变体
- 默认、反转
- 状态
- hover、active、disabled
导航
Sharp-edged navigation with offset hover effects
- 基础骨架
flex items-center justify-between px-8 border-2 border-[#0f0f0f]- 变体
- 默认、深色
- 状态
- hover、active、disabled