JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="select2">
  <div class="flecha">
    <div class="triangulo"></div>
  </div>
  <select name="" id="este">
    <option value="">este 0</option>
    <option value="">este 1</option>
    <option value="">este 2</option>
    <option value="">este 3</option>
  </select>
</div>

CSS

.select2{position: relative; width: 300px; margin: 30px;}
.select2 .flecha{width: 40px; height: 33px; position: absolute; top: 0; right: 0; background:#fff; border: 1px solid #ccc;
   border-radius:0 4px 4px 0;  transition:0.3s; cursor: pointer;}
.select2 .flecha:hover{background:#E6E6E6;}
.select2 .flecha .triangulo{width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; 
  border-top: 10px solid #000;margin: 11px 0 0 14px; }
.select2 select{width: 300px; margin: 0; border: 1px solid #ccc; height: 35px;border-radius: 4px;background: #E6E6E6;box-shadow: 2px 2px 7px #ccc;
line-height: 29px;}

select option {
    background:#DFDFDF;
    color:#000;
    text-shadow:1px 1px 3px #000;
}