tailwind-to-react tool

Input — Tailwind HTML0 chars

Output — React JSX0 chars

export default function Component() {
  return (
    <>
      {/* Your JSX will appear here */}
    </>
  )
}

Live PreviewRendered with Tailwind

HTML vs React Attributes

Quick reference for every attribute this tool converts automatically.

HTML	React JSX	Notes
`class`	`className`	Reserved keyword in JavaScript
`for`	`htmlFor`	Reserved keyword in JavaScript
`tabindex`	`tabIndex`	camelCase
`readonly`	`readOnly`	camelCase
`maxlength`	`maxLength`	camelCase
`minlength`	`minLength`	camelCase
`autocomplete`	`autoComplete`	camelCase
`autofocus`	`autoFocus`	camelCase
`colspan`	`colSpan`	camelCase
`rowspan`	`rowSpan`	camelCase
`onclick`	`onClick`	Event handler
`onchange`	`onChange`	Event handler
`oninput`	`onInput`	Event handler
`onfocus`	`onFocus`	Event handler
`onblur`	`onBlur`	Event handler
`onsubmit`	`onSubmit`	Event handler

Tailwind to React Examples

Real-world examples showing how the converter transforms common Tailwind UI patterns into React JSX components.

Input HTML

<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="alert('Hi')">
  Click me
</button>

Output JSX

export default function Component() {
  return (
    <>
      <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onClick={() => alert('Hi')}>
        Click me
      </button>
    </>
  )
}

Input HTML

<div class="max-w-sm rounded-xl shadow-lg p-6 bg-white">
  <img src="/cover.jpg" class="rounded-lg mb-4">
  <h2 class="text-xl font-bold">Card Title</h2>
  <p class="text-gray-600">Short description here.</p>
</div>

Output JSX

export default function Component() {
  return (
    <>
      <div className="max-w-sm rounded-xl shadow-lg p-6 bg-white">
        <img src="/cover.jpg" className="rounded-lg mb-4" />
        <h2 className="text-xl font-bold">Card Title</h2>
        <p className="text-gray-600">Short description here.</p>
      </div>
    </>
  )
}

Input HTML

<nav class="flex items-center justify-between p-4 bg-gray-900 text-white">
  <a href="/" class="font-bold text-lg">Brand</a>
  <ul class="flex gap-4">
    <li><a href="/about-us">About</a></li>
    <li><a href="/contact-us">Contact</a></li>
  </ul>
</nav>

Output JSX

export default function Component() {
  return (
    <>
      <nav className="flex items-center justify-between p-4 bg-gray-900 text-white">
        <a href="/" className="font-bold text-lg">Brand</a>
        <ul className="flex gap-4">
          <li><a href="/about-us">About</a></li>
          <li><a href="/contact-us">Contact</a></li>
        </ul>
      </nav>
    </>
  )
}

Input HTML

<form class="space-y-4 max-w-sm">
  <label for="email" class="block font-medium">Email</label>
  <input id="email" type="email" autocomplete="email" class="w-full border rounded p-2">
  <label for="pw" class="block font-medium">Password</label>
  <input id="pw" type="password" class="w-full border rounded p-2">
  <button class="w-full bg-indigo-600 text-white py-2 rounded">Sign in</button>
</form>

Output JSX

export default function Component() {
  return (
    <>
      <form className="space-y-4 max-w-sm">
        <label htmlFor="email" className="block font-medium">Email</label>
        <input id="email" type="email" autoComplete="email" className="w-full border rounded p-2" />
        <label htmlFor="pw" className="block font-medium">Password</label>
        <input id="pw" type="password" className="w-full border rounded p-2" />
        <button className="w-full bg-indigo-600 text-white py-2 rounded">Sign in</button>
      </form>
    </>
  )
}