JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<form class="fabulous-form">
    <p>Olá, meu nome é: <input required placeholder="DIGITE SEU NOME"/>.</p>
    <p>Gostaria de registrar <select ><option disabled>SELECIONE A OPÇÃO DESEJADA</option></select></p>
    <p>no dia <input type="date" /> na cidade de <input  placeholder="INFORME A CIDADE"/></p>
    <p>e no local <input placeholder="DIGITE O LOCAL"/>, vocês podem falar comigo através do e-mail <input  placeholder="DIGITE SEU EMAIL"/>e do telefone <input  placeholder="DIGITE SEU TELEFONE"/>. até breve.</p>
    <button>Enviar</button>
</form>

SCSS

body {
    font-family: tahoma, sans-serif;
}

.fabulous-form {
    p {
        text-transform: uppercase;
        text-align: center;
        max-width: 90%;
        margin: 0 auto;
    }
    
    option:hover {
        background: #E16E67;
        color: white;
    }
    
    input, select {
        border: 1px solid transparent;
        outline: none;
        color: #E49696;
        text-transform: uppercase;
        max-width: none;
        min-width: none;
        width: auto;
        text-align: center;
        
        &:focus {
           border-bottom: 1px solid #E16E67;
        }
        
        &::-webkit-input-placeholder {
           color: #E4C6c6;
        }

        &:-moz-placeholder { /* Firefox 18- */
           color: #E4c6c6;  
        }

        &:-ms-input-placeholder {  
           color: #E4c6c6;  
        }
    }
    
    button {
        background: #E16E67;
        color: white;
        text-transform: uppercase;
        padding: 12px;
        border: 1px solid transparent;
        margin: 22px 40% 12px 40%;
    }
}

JavaScript

$(".fabulous-form").find("input").keyup(function() {
    $(this).attr('size', $(this).val().length);
});