JSFiddle - React, Tailwind, and code Playground

by yonet3d

HTML

<form action="">
  <label for="name">Name</label>
  <input type="text" id="name">
  <input type="text" value="My name is Ays"/>  
  <label for="mail">E-mail:</label>      
  <input type="email" id="mail" placeholder="email" />
</form>
<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small" />
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium" />
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large" />
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>
<form>
    <label for="category">Pick a Category</label>
    <select id="category" name="category">
        <option value="shoes">Shoes</option>
        <optgroup label="Skirts">
            <option>Mini</option>
            <option>Midi</option>
        </optgroup>
    </select>
</form>
<label for="date">
        <span>Expiration date:</span>
        <input type="text" id="date" name="expiration" required />
        <strong><abbr title="required">*</abbr></strong>
        <em>formated as mm/yy</em>
      </label>