JSFiddle - React, Tailwind, and code Playground

by poonia

HTML

<div class="select-box">
    <div class="label">Label Value Label Value Label Value</div>
    <div class="separator"></div>
    <div class="chevron"></div>
</div>
<div class="modal"></div>
<div class="options">
    <div class="options-item">options-item1</div>
    <div class="options-item">options-item2</div>
    <div class="options-item">options-item3</div>
    <div class="options-item">options-item4</div>
<div class="options">

CSS

.select-box {
    position: absolute;
    top: 150px;
    left: 150px;
    height: 30px;
    width: 150px;
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 5px;
}
.select-box:hover {
    background-color: rgba(0,0,0,0.2);
    cursor: pointer;
}
.separator {
    position: absolute;
    right: 25px;
    width: 1px;
    top: 3px;
    bottom: 3px;
    background-color: rgba(0,0,0,0.5);
}
.chevron {
    position: absolute;
    top: 7px;
    right: 9px;
    height: 6px;
    width: 6px;
    border: 1px solid rgba(0,0,0,0.5);
    border-right-color: transparent;
    border-top-color: transparent;
    transform: rotate(-45deg);
}
.label {
    position: absolute;
    font-family: sans-serif;
    font-size: 15px;
    top: 6px;
    left: 10px;
    right: 26px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-user-select: none;
}
.modal {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.3);
    display: none;
}
.options {
    
}