Pricing
Tilted 3D Pricing Card
A single premium pricing card with CSS 3D tilt, layered shadows, and a holographic edge.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a single premium pricing card with a CSS 3D tilt effect. The card should subtly rotate toward the cursor on hover using perspective and transform (no external libraries). Use a dark card surface with a thin holographic border that shifts color along the edge. Add a soft layered shadow beneath the card that moves opposite to the tilt. Inside, show a plan name in monospace, a large price, a short description, and a list of features separated by hairline dividers. End with a glowing CTA button. Use Tailwind CSS. Avoid generic checkmark icons—use short text labels or bullets.
Chinese Prompt
创建一个带 CSS 3D 倾斜效果的单一高端定价卡片。卡片应在悬停时通过 perspective 和 transform 向光标方向轻微旋转(不使用外部库)。使用深色卡片表面,边缘有随角度变化颜色的全息细边框。在卡片下方添加与倾斜方向相反的柔和分层阴影。内部展示等宽套餐名、大号价格、简短描述,以及用细线分隔的功能列表。底部放置发光 CTA 按钮。使用 Tailwind CSS。避免通用勾选图标——使用短文本标签或项目符号。

Overview
A pricing card with spatial depth and a holographic edge. The 3D tilt makes the interaction feel tactile and premium.
Features
- CSS 3D tilt toward cursor
- Holographic shifting border
- Layered shadow that follows tilt
- Monospace plan name + large price
- Hairline-divided feature list
- Glowing CTA button
- No generic checkmark icons
Usage
Use as the highlighted tier in a premium pricing section.
Customization
Modify the prompt to:
- Add a second card beside it for comparison
- Change the holographic colors to brand palette
- Add a subtle reflection sheen on the surface
- Include a toggle for monthly/yearly price