JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<!-------------------------->
<!-- Semantica: API Forms -->
<!-------------------------->

<form oninput="total.value = (nights.valueAsNumber * 99) + ((guests.valueAsNumber - 1) * 10)" autocomplete="on" id="formTeste" method="post" target="_blank" novalidate>
  Tag <i><b>progress</b></i>:
  <progress value="2" max="5"></progress>
  <br>  
    
  Tag <i><b>meter</b></i>:
  <meter value="6" min="5" max="10" style="width: 179px;"></meter>
  <br>
  <br>
    
  <label>Primeiro Nome:</label>
  <input type="text" id="name" name="name" placeholder="Insira aqui o seu primeiro nome" dirname="dirtext">
      
  <label>Telefone:</label>
  <input type="tel" id="telef" name="telef" pattern="[0-9]{9}" title="O telefone tem de ser constituído por 9 caracteres numéricos!" autofocus>

  <label>Insira dois endereços email separados por virgula:</label>
  <input type="email" id="email_addr" name="email_addr" multiple required>

  <label>Data:</label>
  <input type="date" id="arrival_dt" name="arrival_dt" style="width: 150px;" max="2017-12-31">
      
  <label>Hora prevista de chegada:</label>
  <input type="time" id="time" name="time" style="width: 80px;">
      
  <label>Tipo de cama:</label>
  <input list="xpto" name="browser">
  <datalist id="xpto">
      <option value="Solteiro"/>
      <option value="King Size Solteiro"/>
      <option value="Casado"/>
      <option value="King Size Casado"/>
  </datalist>
  
  <label>Número de noite (99€ por noite):</label>
  <input type="number" id="nights" name="nights" value="1" min="1" max="30">

  <label>Número de pessoas extras (10€ por pessoa):</label>
  <input type="number" id="guests" name="guests" value="1" min="1" max="4">

  <label>Custo total:</label>
  <output name="total">99</output>.00€
  <br>
  
  <br>
  <label>Tom preferido para o seu quarto:</label>
  <input type="color" id="tom" name="tom" value="#ff0000">
 
  <label>Mês preferido:</label>
  <input type="month" id="prefMes" name="prefMes" style="width: 150px;">  
      
 ...

CSS

label
{
    font-size: 14px;
}

form
{
  width:300px;
  margin: 20px auto;
  padding: 20px;
  padding-bottom: 10px;
  border: 1px solid black;
}

input
{
  font-family: "Helvetica Neue, Helvetica, Arial, sans-serif";
  border:1px solid #ccc;
  font-size:12px;
  width:300px;
  min-height:20px;
  display:block;
  margin-bottom:15px;
  margin-top:5px;
  outline: none;
}

input[type=submit]
{
  cursor: pointer;
  background: gray;
  color: white;
  font-size: 12px;
}

input[type=submit]:hover
{
  cursor: pointer;
  background: #ccc;
  color: white;
  font-size: 12px;
}