按钮
Bold Memphis button with thick border, hard shadow, and bright colors
- 基础骨架
font-black uppercase border-4 border-black transition-all duration-150- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
孟菲斯风格组件配方
font-black uppercase border-4 border-black transition-all duration-150 bg-yellow-400 text-black shadow-[6px_6px_0px_#000] hover:shadow-[3px_3px_0px_#000] hover:translate-x-[3px] hover:translate-y-[3px] active:shadow-none active:translate-x-[6px] active:translate-y-[6px]卡片
Colorful Memphis card with thick border and hard offset shadow
- 基础骨架
border-4 border-black relative transition-all duration-200- 变体
- 默认、黄色、青色
- 状态
- hover
输入框
Memphis-style input with thick border and colored offset shadow
- 基础骨架
w-full bg-white border-4 border-black text-black font-bold placeholder:text-gray-400 focus:outline-none transition-all duration-200- 变体
- 默认、红色阴影
- 状态
- focus、disabled
波浪分隔线
Divider with Memphis-style squiggly line pattern
- 基础骨架
w-full h-3 bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M0%206c5%200%205-6%2010-6s5%206%2010%206%205-6%2010-6%205%206%2010%206%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E')] bg-repeat-x bg-center my-4 md:my-6- 变体
- 默认、彩色、粗体
- 状态
- 静态
几何卡片
Card decorated with random Memphis geometric shapes
- 基础骨架
border-4 border-black relative overflow-visible transition-all duration-200 before:content-[''] before:absolute before:top-[-12px] before:right-[-12px] before:w-10 before:h-10 before:bg-[#48dbfb] before:rounded-full before:border-4 before:border-black before:z-10 after:content-[''] after:absolute after:bottom-[-8px] after:left-4 after:w-0 after:h-0 after:border-[16px] after:border-transparent after:border-[16px] after:border-transparent after:border-[20px] after:border-[#ff6b6b] after:z-10- 变体
- 默认、柔和、大胆
- 状态
- hover
图案徽章
Badge with Memphis pattern background
- 基础骨架
inline-flex items-center justify-center font-black uppercase border-4 border-black transition-all duration-150- 变体
- 圆点、条纹、锯齿
- 状态
- hover