JSFiddle - React, Tailwind, and code Playground

by Luiz Vargas

HTML

<div>
  Select
  <ul>
	<li><a href="#">Primera opción</a></li>
	<li><a href="#">Segunda opción</a></li>
	<li><a href="#">Tercera opción</a></li>
  </ul>
</div>

CSS

div { 
      margin: 2em;
      padding: .5em;
      border: 2px solid #6bb99c;
      width: 12em;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 2px;
    }

    div > ul { display: none; list-style: none;}
    div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid 
    #6bb99c;}
    div:hover > ul > li { padding: 5px; border-bottom: 1px solid #6bb99c;}
    div:hover > ul > li:hover { background: white;}
    div:hover > ul > li:hover > a { color: red; }