HTML → React

HTML

<div className="container">
  <header className="header">
    <nav className="nav">
      <a href="/" className="logo">Logo</a>
      <ul className="menu">
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main className="main">
    <article className="card" style={{ padding: '20px', backgroundColor: 'white', borderRadius: '8px' }}>
      <h1 className="title">Welcome</h1>
      <p className="description">This is a sample HTML that will be converted to React JSX.</p>
      <img src="/image.jpg" alt="Sample image" className="image" />
      <input type="text" placeholder="Enter text" disabled={true} />
      <button onClick="handleClick()">Click me</button>
    </article>
  </main>
  
  <footer className="footer">
    <p>&copy; 2024 Company</p>
  </footer>
</div>