按钮
Soft-raised button with dual-shadow neumorphic effect
- 基础骨架
font-semibold bg-[#e0e5ec] text-gray-700 rounded-xl border-none transition-all duration-200- 变体
- 主要、按下、强调、扁平
- 状态
- hover、active、disabled
新拟物派组件配方
font-semibold bg-[#e0e5ec] text-gray-700 rounded-xl border-none transition-all duration-200 shadow-[5px_5px_10px_#b8bec7,-5px_-5px_10px_#ffffff] hover:shadow-[3px_3px_6px_#b8bec7,-3px_-3px_6px_#ffffff] active:shadow-[inset_5px_5px_10px_#b8bec7,inset_-5px_-5px_10px_#ffffff]卡片
Soft-raised card with neumorphic dual-shadow
- 基础骨架
bg-[#e0e5ec] rounded-2xl border-none transition-all duration-300- 变体
- 默认、内凹、扁平
- 状态
- hover
输入框
Sunken input field with inset neumorphic shadow
- 基础骨架
w-full bg-[#e0e5ec] rounded-xl border-none text-gray-700 focus:outline-none transition-all duration-200- 变体
- 默认、凸起
- 状态
- focus、disabled
标题
Neumorphic heading with soft text styling
- 基础骨架
font-bold tracking-tight leading-tight text-gray-700- 变体
- 默认、强调、柔和
- 状态
- 静态
徽章
Small neumorphic label with soft shadow
- 基础骨架
inline-block font-semibold text-xs md:text-sm bg-[#e0e5ec] text-gray-700 rounded-lg- 变体
- 默认、内凹、强调
- 状态
- 静态
导航栏
Neumorphic navigation bar with soft shadow
- 基础骨架
bg-[#e0e5ec] px-4 md:px-8 py-3 md:py-4- 变体
- 默认、扁平
- 状态
- 静态