JSFiddle - React, Tailwind, and code Playground

by Wagner Souza

HTML

<form class="introduction">
    <div class="form-group">
        <label for="pais">País</label>
        <select name="pais">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="Brasil">Brasil</option>
            <option value="Portugal">Portugal</option>
            <option value="Other">Outro</option>
        </select>
    </div>
    <div class="form-group">
        <label for="indicacao">Como chegou ao fórum?</label>
        <select name="indicacao">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="indication">Indicação</option>
            <option value="site">Site</option>
            <option value="search_engine">Buscadores</option>
        </select>
    </div>
    <div class="form-group">
        <label for="conhecimentos">Conhecimentos:</label>
        <input type="checkbox" /> Sedução<br>
        <input type="checkbox" /> Pnl<br>
        <input type="checkbox" /> Hipnose<br>
        <input type="checkbox" /> Linguagem Corporal<br>
        <input type="checkbox" /> Micro expressão<br>
        <input type="checkbox" /> Mágica<br>
        <input type="checkbox" /> Mentalismo
    </div>
    <div class="form-group">
        <label for="interesses">Interesses no fórum:</label>
        <select name="interesses">
            <option value="" disabled="disabled" selected="selected">Selecione a opção</option>
            <option value="indication">Publicidade/Anuncio</option>
            <option value="site">Entender</option>
            <option value="search_engine">Pnl</option>
            <option value="search_engine">Hipnose</option>
            <option value="search_engine">Linguagem Corporal</option>
            <option value="search_engine">Micro expressão</option>
            <option value="search_engine">Mágica</option>
            <option value="search_engine">Mentalismo</option>
        </select>
    </div>
   ...

CSS

.introduction *,.introduction  *:before,.introduction  *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.introduction{
    font: 14px Lucida sans;
    margin: 3em;
}
.introduction input[type="text"],.introduction select,.introduction label{
    display: block;
}
.introduction select option{
    padding: .5em 1em;
}
option[value="Brasil"], option[value="Portugal"]{
    padding-left: 3.5em!important;
}
option[value="Brasil"]{
    background: url('https://cdn1.iconfinder.com/data/icons/famfamfam_flag_icons/br.png') no-repeat 15px center;
}
option[value="Portugal"]{
    background: url('https://cdn1.iconfinder.com/data/icons/famfamfam_flag_icons/pt.png') no-repeat 15px center;
}
.form-group{
    padding: 1em;
    border: #ddd 1px solid;
    margin: .1em;
}
.introduction label{
    font-weight: bold;
    margin-bottom: .5em;
}
.introduction textarea{
    padding: 1em;
    width: 100%;
    display: block;
    min-height: 10em;
}