Implement UI components from Figma designs using semantic HTML, Tailwind 4, and tailwind-variants (tv()) following project conventions
Reference guide for translating Figma designs into production-ready components with semantic HTML, Tailwind 4, and tailwind-variants.
| Element | Use when |
|---|---|
<article> | Self-contained, independently distributable content (cards, posts, products) |
<section> | Thematic grouping with its own heading — not for layout grouping |
<div> | Pure layout grouping with no semantic meaning |
<button> | Actions that don't navigate (modals, sidebars, triggering logic) |
<a> | Navigation to a URL — always include href |
<section> just to group layout rows inside a card, use <div> instead<h1> inside a repeated card — only one <h1> per page. Use or lower inside cards; when in doubt, use with text styles<h3><p>flex-1 vs justify-betweenRow with one growing element + one fixed element (title + icon button):
flex-1 on the growing element — targeted, survives adding a third childjustify-between on the container — spreads all children, breaks with 3+ elementsAlways pair both utilities: