JSFiddle - React, Tailwind, and code Playground

by Diego Vieira

HTML

<div class="prd-select light-bg"><div class="selected-value">
<span>40 Itens</span><span></span></div> <div class="options"><div class="option">40 Itens</div><div class="option">80 Itens</div><div class="option">120 Itens</div></div></div>

SCSS

.prd-select {
	position:relative;
	width:auto;
  min-width:120px;
	display:inline-block;  
  
  .selected-value {
    border-radius:4px;
    padding:4px;
    cursor:pointer;
    background: transparent;
    position:absolute;
    display:flex;
    flex-direction:row;
    align-content: center;
    align-items: center;
    
    & > span:nth-child(1) {
      flex:1;
    }
    
    & > span:nth-child(2) {
      width: 0; 
      height: 0;
      margin-left:8px;
      border-style: solid;
      border-width: 6px 6px 0 6px;
    }
  }
  
  &.light-bg {
     color: #313131;
     
     span:nth-child(2) {
       border-color: #313131 transparent transparent transparent;
     }
     
     .selected-value:hover {
       background:rgba(0,0,0,0.17);
     }
  }
  
  &.dark-bg {
    color: #fff;
     
     span:nth-child(2) {
       border-color: #fff transparent transparent transparent;
     }
     
     .selected-value:hover {
       background:rgba(255,255,255,0.17);
     }
  }
  
  .options {
    display:none;
  }
	
}