JSFiddle - React, Tailwind, and code Playground

by Khalid Alharbi

HTML

<h1>Return Request Form</h1>
    <form>
      <h2>Personal Information:</h2>
      <label for="fname">First name:</label>
      <input id="fname" name="fname" type="text" minlength="2" maxlength="15" size="17" required>
      <br>
      <label for="lname">Last name:</label>
      <input id="lname" name="lname" type="text" size="17" required>
      <br>
      <label for="lname">Email:</label>
      <input id="lname" name="lname" type="email" size="17" required>
      <br>
      <h2>Address:</h2>
      <label for="st_address">Street Address:</label>
      <input id="st_address" name="streetAddress">
      <br>
      <label for="city-select">City:</label>
      <select name="cities" id="city-select">
        <option value="Makkah">Makkah</option>
        <option value="Jeddah">Jeddah</option>
        <option value="Riyadh">Riyadh</option>
        <option value="Khobar">Al Khobar</option>
      </select>
      <h2>Order:</h2>
      <label for="orderDate">Order date:</label>
      <input type="date" id="orderDate" name="order-date" min="2022-01-01" max="2022-12-31">
      <h2>Payment:</h2>

      <input type="radio" id="visaPayment" name="payment_type" value="VISA" checked>
      <label for="visaPayment">Visa</label>
      <input type="radio" id="mastercard" name="payment_type" value="Mastercard">
      <label for="mastercard">Mastercard</label>
      <input type="radio" id="debitcard" name="payment_type" value="Debitcard">
      <label for="debitcard">Debit Card (Mada)</label>

      <br>
      <p>Would you like to receive order status and tracking updates?</p>
      <input type="checkbox" id="emailNotification" name="notifications" value="Email">
      <label for="emailNotification">Email</label>
      <input type="checkbox" id="smsNotification" name="notifications" value="SMS">
      <label for="smsNotification">SMS</label>

      <br />
      <label for="picture">Upload a picture:</label>
      <input type="file" accept="image/png, image/jpeg" name="picture">

   ...