按钮
Candy-colored 3D clay button with inset highlight and outer shadow
- 基础骨架
font-semibold rounded-2xl border-none transition-all duration-200- 变体
- 主要、次要、强调、暖色
- 状态
- hover、active、disabled
粘土拟态组件配方
font-semibold rounded-2xl border-none transition-all duration-200 bg-[#f8b4d9] text-gray-800 shadow-[0_8px_16px_rgba(0,0,0,0.1),inset_0_-4px_8px_rgba(0,0,0,0.1)] hover:shadow-[0_12px_20px_rgba(0,0,0,0.15),inset_0_-4px_8px_rgba(0,0,0,0.1)] hover:-translate-y-0.5 active:shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_4px_8px_rgba(0,0,0,0.15)] active:translate-y-0.5卡片
Soft 3D clay card with candy pastel background and rounded corners
- 基础骨架
rounded-3xl border-none transition-all duration-300- 变体
- 默认、薄荷、薰衣草
- 状态
- hover
输入框
Soft clay input with inset shadow and rounded corners
- 基础骨架
w-full bg-white/80 rounded-2xl border-none text-gray-800 focus:outline-none transition-all duration-200- 变体
- 默认、凸起
- 状态
- focus、disabled
标题
Playful clay-style heading with bold weight
- 基础骨架
font-bold tracking-tight leading-tight text-gray-800- 变体
- 默认、粉色、紫色
- 状态
- 静态
徽章
Small candy-colored clay badge with 3D shadow
- 基础骨架
inline-block font-semibold text-xs md:text-sm text-gray-800 rounded-xl- 变体
- 默认、薄荷、薰衣草
- 状态
- 静态
导航栏
Clay-style navigation bar with soft 3D shadow
- 基础骨架
bg-[#fce7f3] rounded-b-2xl px-4 md:px-8 py-3 md:py-4- 变体
- 默认、薄荷
- 状态
- 静态