按钮
Clean pill-shaped button with Apple-inspired minimal design
- 基础骨架
font-medium tracking-tight rounded-full transition-all duration-300- 变体
- 主要、次要、链接、轮廓
- 状态
- hover、active、disabled
Apple 风格组件配方
font-medium tracking-tight rounded-full transition-all duration-300 bg-[#0071e3] text-white hover:opacity-85 active:scale-[0.98]卡片
Minimal Apple-style card with subtle shadow and rounded corners
- 基础骨架
bg-white rounded-2xl shadow-sm border border-gray-100 transition-all duration-300- 变体
- 默认、悬浮、扁平
- 状态
- hover
输入框
Apple-style input with subtle background and rounded corners
- 基础骨架
w-full bg-[#f5f5f7] rounded-xl border-none text-[#1d1d1f] placeholder:text-gray-400 focus:outline-none transition-all duration-200- 变体
- 默认、描边
- 状态
- focus、disabled
标题
Apple-style heading with tight tracking and bold weight
- 基础骨架
font-bold tracking-tight leading-tight text-[#1d1d1f]- 变体
- 默认、柔和、强调
- 状态
- 静态
徽章
Minimal Apple-style pill badge
- 基础骨架
inline-block font-medium text-xs md:text-sm rounded-full- 变体
- 默认、蓝色、绿色
- 状态
- 静态
导航栏
Apple-style clean navigation bar
- 基础骨架
bg-white/80 backdrop-blur-lg border border-gray-200/50 px-4 md:px-8 py-2.5 md:py-3- 变体
- 默认、深色
- 状态
- 静态