HTML to JSX Converter
Paste a Tailwind HTML snippet or an SVG icon and get JSX that works in React and Next.js. Nothing is uploaded.
HTML or SVG
JSX
<>
{/* Icon button */}
<button className="inline-flex items-center gap-2 rounded-lg bg-cyan-700 px-4 py-2 text-white" onClick={() => { save() }} style={{ fontWeight: "600", letterSpacing: "-0.01em" }}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M20 6 9 17l-5-5"></path>
</svg>
Save
</button>
<label htmlFor="email">Email</label>
<input id="email" type="email" tabIndex={1} maxLength={80} readOnly />
</>Frequently asked questions
What changes when converting HTML to JSX?
class becomes className and for becomes htmlFor. Hyphenated attributes are camelCased, so stroke-width is strokeWidth. Inline style strings become objects, void tags like <input> and <br> are self-closed, and HTML comments become {/* */}.
How do I use an SVG in React?
Convert it here, then paste the result into a component. SVG attributes like stroke-linecap and fill-rule need camelCase in JSX, which is the part people usually get wrong by hand. Use currentColor for stroke and fill to let Tailwind text classes color the icon.
Why do I need to convert Tailwind HTML snippets?
Tailwind examples are usually written as HTML. JSX is stricter, so copying them straight into a React component causes warnings or errors until class and similar attributes are renamed.
Are there things this converter cannot handle?
It works on markup, not scripts. Content inside <script> or <style> tags, and unusual attributes in quotes containing the > character, may need a manual look. Check the output once before shipping.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.