JSFiddle - React, Tailwind, and code Playground

by Shawn Wood

HTML

<div id="root"></div>

React

import {useState} from "react";
// Use functional or class component based on your preference.
const root = document.querySelector('#root');

// Make it a default export.
export default function LoginForm({ onSubmit }) {
  
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  function submitLogin(event){
    event.preventDefault();
    const data = {"username": username, "password": password};
    onSubmit(data);
  }

  return (<div>  
  <div className="form-group">
    <label htmlFor="unsername-input">Username: </label> 
    <input type="text"
      name="username"
      className="form-control"
      placeholder="Username"
      id="unsername-input"
      value={username}
      onChange={(e) => setUsername(e.target.value)} 
      />
    </div>
    <div className="form-group">
    <label htmlFor="password-input">Password: </label> 
    <input type="password"
      name="password"
      className="form-control"
      placeholder="Password"
      id="unsername-input"
      value={password}
      onChange={(e) => setPassword(e.target.value)} 
      />
    </div>
    <button id="login-button" type="submit" onClick={submitLogin}>Submit</button>
         
  </div>));
  //ReactDOM.render(<LoginForm />, root );
}