JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">
<link rel="stylesheet" href="http://purecss.io/combo/1.5.4?/css/main.css&amp;/css/rainbow/baby-blue.css">
<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Nome</label>
            <input id="name" type="text" placeholder="Nome e sobrenome" required oninvalid="setCustomValidity('Digite o nome E o sobrenome ')" onchange="try{setCustomValidity('')}catch(e){}">
        </div>

        <div class="pure-control-group">
            <label for="password">Senha</label>
            <input id="password" type="password" placeholder="Senha" required pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" oninvalid="setCustomValidity('Maiúsculas, minúsculas, caracteres especias e números com no mínimo 8 caracteres')">
        </div>

        <div class="pure-controls">
            
            <button type="submit" class="pure-button pure-button-primary">Enviar</button>
        </div>
    </fieldset>
</form>

CSS

body{
    background-color: #ddd;
}
form{
    background-color: #fff;
    padding: 2em;
}

::-webkit-input-placeholder {
    color: #900;
}