按钮
Hand-drawn button with dashed border, marker-color shadow, and slight tilt on hover
- 基础骨架
font-sans font-semibold tracking-wide rounded-sm border-2 border-dashed transition-all duration-200 ease-in-out- 变体
- 墨色、红色标记、蓝绿标记、素描
- 状态
- hover、active、disabled
手绘涂鸦风组件配方
font-sans font-semibold tracking-wide rounded-sm border-2 border-dashed transition-all duration-200 ease-in-out bg-[#2c2c2c] text-[#fffef5] border-[#2c2c2c] shadow-[3px_3px_0px_#ff6b6b] hover:translate-x-[1px] hover:translate-y-[1px] hover:shadow-[2px_2px_0px_#ff6b6b] hover:rotate-[-0.5deg] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none卡片
Notebook-paper card with dashed border, marker shadow, and pushpin/tape decorations
- 基础骨架
bg-[#fffef5] rounded-sm border-2 border-dashed border-[#2c2c2c] shadow-[4px_4px_0px_#4ecdc4] transition-all duration-200 ease-in-out- 变体
- 默认、红色标记、黄色标记、蓝绿标记
- 状态
- hover
输入框
Notebook-style input with dashed border on paper background
- 基础骨架
w-full rounded-sm border-2 border-dashed border-[#2c2c2c] bg-[#fffef5] text-[#2c2c2c] placeholder:text-[#2c2c2c]/30 font-sans focus:outline-none transition-all duration-200 ease-in-out- 变体
- 默认、蓝绿、红色
- 状态
- focus、disabled
便利贴
Sticky note card with slight rotation and shadow
- 基础骨架
rounded-sm font-sans shadow-[3px_3px_8px_rgba(0,0,0,0.15)] transition-all duration-200 ease-in-out relative- 变体
- 黄色、粉色、蓝色、绿色
- 状态
- hover
涂鸦边框
Container with hand-drawn wavy border effect
- 基础骨架
bg-[#fffef5] rounded-sm transition-all duration-200 ease-in-out relative- 变体
- 默认、粗线、点线
- 状态
- hover
铅笔分割线
Horizontal divider with pencil-drawn line aesthetic
- 基础骨架
w-full my-4 transition-all duration-200 ease-in-out- 变体
- 默认、波浪、虚线
- 状态
- 静态
素描徽章
Badge with hand-drawn circle border
- 基础骨架
inline-flex items-center justify-center rounded-full border-2 border-dashed font-sans font-bold transition-all duration-200 ease-in-out- 变体
- 红色、蓝色、绿色、橙色
- 状态
- hover
笔记本列表
List container styled like notebook paper with lines
- 基础骨架
bg-[#fffef5] rounded-sm border-2 border-dashed border-[#2c2c2c] p-5 md:p-8 font-sans transition-all duration-200 ease-in-out relative- 变体
- 默认、网格、点线
- 状态
- hover