JSFiddle - React, Tailwind, and code Playground

by Natan Tavares Martins

HTML

<div id="pesquisaArtista">
                <label for="artista">Artista: 
                <input id="artista" name="artista" type="text"/>
                </label>
            </div>
            <div id="pesquisaGenero">
               <label for="genero">Gênero:
               <input id="genero" name="genero" type="text"/>
               </label> 
            </div>
            <div id="pesquisaAlbum">
               <label for="album">Álbum:
               <input id="album" name="album" type="text"/>
               </label>
            </div>

CSS

#pesquisaArtista{
    background-color: #4aae27;
    height: 40px;
    width: 90%;
    max-width: 300px;
    padding-top: 0px;
    display: inline-block;
}
#pesquisaArtista label{
    color: white;
    font-family: Agency FB;
    font-size: 1.9em;
}
#pesquisaArtista input{
    position: relative;
    color: grey;
    padding: 5px;
    width: 170px;
    margin-top: -30px;
    
}
#pesquisaGenero{
    background-color: #cda009;
    height: 40px;
    width: 90%;
    max-width: 300px;
    padding-top: 0px;
    color: white;
    display: inline-block;
}
#pesquisaGenero label{
    color: white;
    font-family: Agency FB;
    font-size: 1.9em;
}
#pesquisaGenero input{
    position: relative;
    color: grey;
    padding: 5px;
    width: 170px;
    margin-top: -30px;
}
#pesquisaAlbum{
    background-color: #053d74;
    height: 40px;
    width: 90%;
    max-width: 300px;
    padding-top: 0px;
    display: inline-block;
}
#pesquisaAlbum label{
    color: white;
    font-family: Agency FB;
    font-size: 1.9em;
}
#pesquisaAlbum input{
    position: relative;
    color: grey;
    padding: 5px;
    width: 170px;
    margin-top: -30px;
}