按钮
Gothic button with ornate borders, deep purple tones and cathedral-inspired aesthetic
- 基础骨架
font-serif uppercase tracking-widest border-2 transition-all duration-300 ease-in-out- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
哥特式风组件配方
font-serif uppercase tracking-widest border-2 transition-all duration-300 ease-in-out bg-[#2d1b4e] text-[#c9a227] border-[#c9a227]/60 shadow-[0_4px_16px_rgba(45,27,78,0.6)] hover:shadow-[0_6px_24px_rgba(201,162,39,0.4)] hover:border-[#c9a227] active:scale-95卡片
Dark gothic card with ornate borders and cathedral-window aesthetic
- 基础骨架
bg-[#0a0a0a]/90 border-2 border-[#c9a227]/40 shadow-[0_4px_20px_rgba(10,10,10,0.8)] transition-all duration-300 ease-in-out- 变体
- 默认、血色、金色
- 状态
- hover
输入框
Gothic-styled input with ornate border and dark surface
- 基础骨架
w-full border-2 border-[#c9a227]/30 bg-[#0a0a0a]/80 text-[#c9a227] placeholder:text-[#c9a227]/30 font-serif focus:outline-none transition-all duration-300 ease-in-out- 变体
- 默认、血色
- 状态
- focus、disabled
石材面板
Medieval stone-textured panel with carved edge effect
- 基础骨架
relative bg-gradient-to-b from-[#2a2a2a] to-[#1a1a1a] border-4 border-[#3a3a3a] shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),inset_0_-2px_4px_rgba(0,0,0,0.3)] p-6- 变体
- 默认、深色
- 状态
- 静态
盾牌徽章
Heraldic shield-shaped badge for status or labels
- 基础骨架
inline-flex items-center justify-center px-4 py-2 bg-[#2d1b4e] text-[#c9a227] font-serif uppercase tracking-wider text-sm clip-path-shield- 变体
- 紫色、血色、金色
- 状态
- 静态
火漆印章
Circular wax seal decoration with embossed effect
- 基础骨架
inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#8b1a1a] shadow-[inset_0_2px_4px_rgba(255,255,255,0.2),inset_0_-2px_4px_rgba(0,0,0,0.3),0_4px_8px_rgba(0,0,0,0.5)]- 变体
- 默认
- 状态
- 静态
花窗分隔线
Gothic tracery-inspired decorative divider
- 基础骨架
relative w-full h-8 flex items-center justify-center- 变体
- 默认
- 状态
- 静态
装饰首字母
Medieval illuminated manuscript style decorative initial letter
- 基础骨架
inline-block text-6xl font-serif font-bold text-[#c9a227] float-left mr-2 leading-none- 变体
- 金色、血色
- 状态
- 静态
羊皮纸卡片
Card styled to look like aged parchment with burnt edges
- 基础骨架
relative bg-gradient-to-br from-[#f5f0e1] to-[#e5d9c3] p-6 shadow-lg- 变体
- 默认、陈旧
- 状态
- 静态