JSFiddle - React, Tailwind, and code Playground

by Rafa Ola

HTML

<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
    	<input onclick="$(this).closest('div').find('select').slideToggle(110)">
        <br>
    	<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
    		<optgroup label="Fantasy"></optgroup>
    		<option value="gandalf">Gandalf</option>
    		<option value="harry">Harry Potter</option>
    		<option value="jon">Jon Snow</option>
    		<optgroup label="Comics"></optgroup>
    		<option value="tony">Tony Stark</option>
    		<option value="steve">Steven Rogers</option>
    		<option value="natasha">Natasha Romanova</option>
    	</select>
    </span>
</div>

CSS

/* required part */
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}

/* beauty */
.stylish input {
    width:250px;
    padding:5px;
}
.stylish select {
    min-width:260px;
    margin-top:1px;
    border-top:none;
}
.stylish select option {
    padding:12px 0px 10px 24px;
    box-shadow:32px -25px 50px -40px black inset;
}
.stylish select optgroup {
    padding:15px 20px 7px 0px;
    text-align:center;
    font:15px candara,sans-serif;
    text-shadow:1px 3px 5px black;
    font-weight:bold;
    color:white;
    background:radial-gradient(ellipse at 50% -40px, white, #003853);
}