返回配方目录
Holy Grail Layout

圣杯布局组件配方

font-medium rounded-lg transition-colors duration-200 bg-[#3b82f6] text-white hover:bg-[#2563eb] active:bg-[#1d4ed8]
button

按钮

Professional balanced button for classic header/sidebar/content layouts

基础骨架
font-medium rounded-lg transition-colors duration-200
变体
主要、次要、轮廓
状态
hover、active、disabled
card

卡片

Content card with subtle border for the main column of holy grail layout

基础骨架
bg-white rounded-xl border border-gray-100 transition-shadow duration-200
变体
默认、扁平、指标
状态
hover
input

输入框

Clean bordered input for holy grail layout toolbar and forms

基础骨架
w-full bg-gray-50 border border-gray-200 rounded-lg text-sm text-[#1e293b] placeholder:text-gray-400 focus:outline-none transition-all duration-200
变体
默认、白色
状态
focus、disabled