HTML to JSX Converter

Convert HTML to React JSX/TSX. Handles class→className, style objects, and self-closing tags

HTML1.10 KB

<header class="header">
  <nav class="nav-bar">
    <a href="/" class="logo" tabindex="0">
      <img src="/logo.png" alt="Logo" width="120" height="40">
    </a>
    <ul class="nav-list">
      <li><a href="/about" class="nav-link">About</a></li>
      <li><a href="/contact" class="nav-link">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <div class="container">
    <h1 style="color: red; font-size: 24px; margin-bottom: 16px">Hello World</h1>
    <label for="email">Email</label>
    <input type="email" id="email" class="input-field" placeholder="Enter email">
    <br>
    <hr>
    <button class="btn" onclick="handleClick()" tabindex="1">Submit</button>
    <p class="description" style="background-color: #f0f0f0; padding: 8px">
      Welcome to our site.
    </p>
  </div>
  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" fill-rule="evenodd" clip-path="url(#clip)" data-testid="icon" aria-label="icon">
    <circle cx="12" cy="12" r="10" />
    <path d="M12 2v20" stroke-dasharray="5 3" />
  </svg>
</main>

JSX