JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<!doctype html>
<html>
<head>

</head>
<body>
  <form>
    <fieldset>
      <legend>Basic information:</legend>
        
      <label for="nome">Name:</label>
      <input type="text" name="nome" placeholder="es: Sandro Paganotti" 
             pattern="[a-zA-Z\s]{6,20}" title="solo lettere e spazi, da 6 a 10 caratteri">
        
      <label for="email">Email:</label>
      <input type="email" name="email" placeholder="es: [email protected]" 
             title="per favore inserisci un indirizzo email valido">

        
    </fieldset>
    <input type="submit" value="Send this form">
  </form>
</body>
</html>

CSS

fieldset{
    width: 300px;
    margin-bottom: 10px;
  }
  
  input, label{
    margin: 3px 0px;
  }
  
  input[type="text"],input[type="email"]{
    float: right;
    clear: right;
  }
  
  label{
    float: left;
    clear: left;
  }


  input[type="text"]:after{
     content: "ASDADAS";
  }