Free CSS to Tailwind converter and HTML to React JSX tool — paste code, preview, and copy utilities or components in your browser.
Convert CSS to Tailwind utility classes or HTML to React JSX entirely in your browser. This is a heuristic helper — not a perfect 100% compiler.
Paste CSS rules. Common layout/spacing/color props map to Tailwind v4-friendly utilities.
flex flex-col gap-4 p-6 my-4 mx-auto max-w-[420px] bg-[#ffffff] text-[#0f172a] border border-[#e2e8f0] rounded-xl shadow-lg text-base font-medium leading-normal
.cardflex flex-col gap-4 p-6 my-4 mx-auto max-w-[420px] bg-[#ffffff] text-[#0f172a] border border-[#e2e8f0] rounded-xl shadow-lg text-base font-medium leading-normal
.card__titletext-xl font-bold m-0
.card__actionsflex items-center justify-end gap-2
Coverage is intentional but incomplete: common layout, spacing, color, typography, border, and shadow props are mapped. Complex selectors, animations, media queries, and nested CSS may need manual cleanup. HTML conversion never evaluates JavaScript.