Estudio
24€/ mes
- Proyectos ilimitados
- Colaboración en equipo
- Exportación completa
HTML + CSSCards
Pricing plan card
A plan card that lifts and picks up a colored glow on hover, with the button arrow nudging toward checkout.
Settings
16px
1x
Code
<article class="uv-cprice"><header><i>✦</i><span>PLAN</span></header><h3>Studio</h3><div><strong>24€</strong><small>/ mes</small></div><ul><li>Unlimited projects</li><li>Team collaboration</li><li>Full export</li></ul><button>Choose plan <b>→</b></button></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
Where to use it
Pricing pages are where people hesitate, and a small lift under the cursor makes the plan feel within reach. Use it for the middle tier of a design tool, a coworking membership or a monthly coffee subscription. This pricing card in HTML and CSS has the price, a checklist of features and a clear button.
Put the plan you want to sell in the middle and let the others stay still; if every card lifts, none of them stands out. Three or four features are enough, and the full comparison belongs in a table further down.