JSFiddle - React, Tailwind, and code Playground

by Leandro Amorim

HTML

<header>
    <div class="local">
        <img src="images/local_bg.png" alt="Caminho Default"> <span>Enviar arquivo</span>

    </div>
    <div class="info">
        <img src="images/user_ico.png" alt="Icone de usuário" class="user_ico"> <span class="userName">Luítame de Oliveira</span>

        <img src="images/down_ico.png" alt="Icone de seta" class="info_btn">
    </div>
</header>
<div class="content">
    <div class="area">
        <form class="form_envia" method="post" action="#">
            <input type="file">
            <label>
                <input name="processo" class="processo" type="text">
            </label>
            <label>
                <select name="categoria">
                    <option value="">Categoria</option>
                    <option value="">DRAFT</option>
                    <option value="">DRAFT</option>
                    <option value="">DRAFT</option>
                    <option value="">DRAFT</option>
                </select>
                <input type="checkbox" name="notCat"><span>Outra Categoria</span>

            </label>
            <label>
                <select name="tipo">
                    <option value="">Tipo</option>
                    <option value="">Importação</option>
                    <option value="">Exportação</option>
                </select>
            </label>
            <label>
                <input name="importador" class="importador" type="text">
            </label>
            <label>
                <input name="exportador" class="exportador" type="text">
            </label>
            <label>
                <input name="navio" class="navio" type="text">
            </label>
            <label>
                <select name="semana">
                    <option value="">Semana</option>
                    <?php for ($i=1; $i <=52 ; $i++) { echo "<option value=".$i. ">$i</option>"; } ?>
                </select>
                <input name="data" class="data" type="text">
      ...

CSS

* {
    margin: 0;
    font-family:'Roboto', sans-serif;
}
body, html {
    height:100%;
}
header {
    background: #75FF75;
    height: 30px;
    width: 100%;
}
header .local {
    float: left;
}
header img {
    height: 30px;
    float: left;
    margin-left: 5px;
}
header span {
    float: left;
    font-family:'Roboto', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 12px;
    color: #333;
    text-shadow: 0px 0px 1px #ccc;
    margin: 7px 0 0 5px;
}
header .info {
    float: right;
    background: white;
    height: 24px;
    margin: 3px 10px 3px 0;
}
header .info .user_ico {
    width: 20px;
    height: 19px;
    float: left;
    margin-top: 2px;
}
header .info .userName {
    color: #088508;
    font-style: normal;
    font-weight: 300;
}
header .info .info_btn {
    width: 12px;
    height: 11px;
    float: right;
    margin-top: 8px;
    margin-right: 5px;
}
.content {
    display: table;
    margin: 0 auto;
    height: 100%;
}
input, select {
    font-size: 15px;
    padding: 2px;
    margin: 5px;
}
label {
    display: block;
}
strong {
    font-weight: normal;
    font-size: 14px;
}
.area {
    display: table-cell;
    vertical-align: middle;
    height:100%;
}
.form_envia {
    background: #EDEFF1;
    padding: 30px 100px;
    width: 336px;
    height: 395px;
}
input, select {
    border: 2px solid #bdc3c7;
    border-radius: 5px;
    font-size: 15px;
    padding: 8px 12px;
    color: #006600
}
input:focus {
    border: 2px solid #1abc9c;
}
.btn_envia {
    display: block;
    background: #006600;
    border: none;
    width: 100%;
    color: white;
    text-shadow: 0 0 1px #333;
}
.btn_envia:hover {
    background: #00A400;
}