JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<form action="#" method="post">
    <p>Nom</p>
    <input type="text" name="nom" required="required"/>
    
    <p>Prénom</p>
    <input type="text" name="prenom" required="required"/>
    
    <p>Message</p>
    <textarea name="message" required="required"></textarea>
    
    <p><input type="submit" value="Envoyer"/></p>
</form>

CSS

form p, input[type=text], textarea {
    width:50%;
    height:35px;
    outline:none;
    margin-left:25%;
    padding:6px 12px;
    font-size:14px;
    line-height:1.42857143;
    color:#555;
    background-color:#fff;
    background-image:none;
    border:1px solid #ccc;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

textarea {
    min-height:150px;
}

form p {
    border:none;
    height:15px;
}