JSFiddle - React, Tailwind, and code Playground

by Arkl1te

HTML

<form action="upload.php" method="post">
    <label>Descripción<textarea name="descripcion" placeholder="Datos sobre el sitio, contenido a aprender..."></textarea></label>
    <label>Idioma
        <div id="select">
            <select>
                <option value="english">Inglés</option>
                <option value="spanish">Español</option>
                <option value="portuguese">Portugués</option>
                <option value="german">Alemán</option>
                <option value="french">Francés</option>
                <option value="italian">Italiano</option>
                <option value="chinese">Chino</option>
                <option value="japanese">Japonés</option>
                <option value="russian">Ruso</option>
                <option value="turkish">Turco</option>
                <option value="arabic">Arábigo</option>
            </select>
        </div>
    </label>
    <label>
        <div id="select">
            <select name="subcategoria">
                <option value="Diseño de videojuegos">Diseño de videojuegos</option>
                <option value="Programación básica">Programación básica</option>
                <option value="Programación web">Programación web</option>
                <option value="Edición multimedia">Edición multimedia</option>
                <option value="Guías">Guías</option>
            </select>
        </div>
    </label>
</form>

CSS

body{background: black;}

form{
    width: 250px;
}

label{
    padding: 10px;
    margin: 10px;
}

input, textarea, #select, #radios, form ul li{
    width: 100%;
    margin: 10px;
    padding: 5px;
    border: 2px solid teal;
    border-radius: 15px;
    background: black;
    color: gray;
    font-family: arial;
    -webkit-transition: box-shadow .2s, color .2s, border .2s, border-radius .2s, width .2s;
    -moz-transition: box-shadow .2s, color .2s, border .2s, border-radius .2s;
    outline: none;
}

input:hover, textarea:hover, #select:hover, #radios:hover{
    box-shadow: 0 0 5px 2px white;
    border:2px solid white;
}

input:focus, textarea:focus, #select.selected{
    box-shadow: inset 0 0 5px 1px white;
    border:2px solid white;
    color: white;
    border-radius: 5px;
    outline: none;
}

textarea{
    height: 100px;
    min-width: 500px;
    max-width: 625px;
}

select{		
    color: white;
    background: black;					
    border: none;
    outline: none;
}
#select{
    display: inline-block;
}

#radios{
    padding: 5px;
}

#radios label:hover {
    color: silver;
}

.libelulas{color: white; text-shadow: 0px 0px 4px white;}



.antiancho{
    width: auto;
}

.antiancho[type="submit"]:hover, .antiancho[type="submit"]:focus{
    box-shadow: 0 0 5px 2px red;
    border:2px solid red;
    -webkit-animation: neon infinite 2s linear;
}

JavaScript

$(document).ready( function(){
    $('select').focus( function(){
        $('#select').addClass('selected');
    });
    $('select').focusout( function(){
        $('#select').removeClass('selected');
    });
});