按钮
Dreamlike button with surreal color shifts and unexpected visual combinations
- 基础骨架
font-serif italic tracking-wide rounded-lg transition-all duration-500 ease-in-out- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
超现实主义风组件配方
font-serif italic tracking-wide rounded-lg transition-all duration-500 ease-in-out bg-gradient-to-r from-[#1a1a3e] to-[#c38d94] text-[#f0ece4] border border-[#d4a574]/50 shadow-lg hover:shadow-[0_8px_30px_rgba(195,141,148,0.4)] hover:scale-105 active:scale-95卡片
Dreamscape card with melting form aesthetics and surreal depth
- 基础骨架
bg-gradient-to-br from-[#f0ece4] to-[#f0ece4]/80 rounded-2xl border border-[#d4a574]/30 shadow-lg transition-all duration-500 ease-in-out- 变体
- 默认、午夜、梦境
- 状态
- hover
输入框
Surreal input with dreamlike transitions and soft desert-toned styling
- 基础骨架
w-full rounded-lg border border-[#d4a574]/40 bg-[#f0ece4] text-[#1a1a3e] placeholder:text-[#c38d94]/50 focus:outline-none transition-all duration-500 ease-in-out- 变体
- 默认、深色
- 状态
- focus、disabled
融化边框
Frame with melting/dripping edge effect and surreal depth
- 基础骨架
bg-gradient-to-br from-[#f0ece4] to-[#f0ece4]/80 rounded-[1rem_1rem_2rem_0.5rem] border border-[#d4a574]/30 shadow-lg transition-all duration-500 ease-in-out- 变体
- 默认、暖色、冷色
- 状态
- hover
梦境面板
Panel with dreamy, ethereal background and surreal styling
- 基础骨架
bg-gradient-to-br from-[#f0ece4]/90 to-[#c38d94]/10 rounded-2xl border border-[#d4a574]/20 backdrop-blur-sm transition-all duration-500 ease-in-out- 变体
- 默认、暮光、黎明
- 状态
- hover
眼睛徽章
Badge with surrealist eye motif and dreamlike styling
- 基础骨架
inline-flex items-center justify-center rounded-[50%/40%] border border-[#d4a574]/40 font-serif italic transition-all duration-500 ease-in-out- 变体
- 睁开、闭合、梦境
- 状态
- hover