JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<!-- .not for unclicable li -->
<!-- .topDes for TOP -->
<div class="custom-select">Sélectionnez une ville de départs</div>
<ul class="customSelect">
<li class="title not" value="TOPDEP"> Top Villes de départ</li>
<li class="topDes" value="PAR"> Paris</li>
<li class="topDes" value="LYS"> Lyon</li>
<li class="topDes" value="NTE"> Nantes</li>
<li class="topDes" value="MRS"> Marseille</li>
<li class="topDes" value="TLS"> Toulouse</li>
<li class="topDes" value="BOD"> Bordeaux</li>
<li class="topDes" value="LI"> Lille</li>
<li class="separ not" value=""></li>
<li class="title not" value="0">Toute les villes de départ</li>
<li value="QXB"> Aix en Provence (Gare SNCF)</li>
<li value="AJA"> Ajaccio</li>                         
<li value="ANE"> Angers</li>                         
<li value="QXG"> Angers (Gare SNCF)</li>
<li value="AVN"> Avignon</li>                         
<li value="XZN"> Avignon (Gare SNCF)</li>
<li value="BSL"> Bâle (CH)</li>                         
<li value="EAP"> Bâle/Mulhouse (CH)</li>
<li value="BCN"> Barcelone (ES)</li>                         
<li value="BIA"> Bastia</li>                         
<li value="EGC"> Bergerac</li>                         
<li value="BIQ"> Biarritz</li>                         
<li value="BIO"> Bilbao (ES)</li>                         
<li value="BOD"> Bordeaux</li>                         
<li value="ZFQ"> Bordeaux (Gare SNCF)</li>
<li value="BES"> Brest</li>                         
<li value="BVE"> Brive La Gaillarde</li>
<li value="BRU"> Bruxelles (BE)</li>                         
<li value="ZYR"> Bruxelles - (Gare du Midi) (BE)</li>
<li value="CFR"> Caen</li>                         
<li value="XIZ"> Champagne-Ardenne (Gare SNCF)</li>
<li value="CRL"> Charleroi (Aéroport Gosselies) (BE</li>
<li value="CER"> Cherbourg</li>                         
<li value="CFE"> Clermont Ferrand</li>
<li value="DOL"> Deauville</li>                         
<li value="DLE"> Dole</li>                         
<li...

CSS

.customSelect {
    margin:0;
    padding:0;
    font-family: Arial;
}
.customSelect{
    display:none;
    border: 1px solid #838383;
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color:#F5F5F5;
    width: 250px;
    font-size:13px;
}
.customSelect:hover{
    cursor:pointer;
}
.customSelect li:not(.title):not(.separ):hover{
    background-color:#3399ff;
    color:white;
}
.customSelect > li:not(.topDes){
    padding-left:5px;
}
.customSelect li{
    position:relative;
    list-style:none;
    line-height:25px;
    left:0;
    top: 0;
}
.separ{
    height:10px;
}
.title{
    font-weight:900;
}
.topDes:before{
    content:"TOP";
    float:left;
    color:White;
    background:#fdb714;
    font-size:12px;
    padding:0px 5px;
    margin-right:5px;
}
.custom-select{
    background-color:#F5F5F5;
    color:#838383;
    display: inline-block;
    line-height: 32px;
    padding: 0 10px;
    position: relative;
    width:90%;
    overflow: hidden;
    white-space: nowrap;
    cursor:pointer;
    font-family: Arial;
}
.custom-select:before{
    position: absolute;
    right: 0;
    top: 0;
    content: '';
    background: #fdb714;
    width: 24px;
    height: 100%;    
}
.custom-select:after{
    position: absolute;
    right: 8px;
    top: 13px;
    border-top: 6px solid #fff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    content: "";
}

JavaScript

$('.custom-select').click(function(e){
    e.stopPropagation();
	$('.clicked').removeClass('clicked');
	$(this).next($('.customSelect')).fadeIn(350);
	$(this).addClass('clicked');
});

$('body').click(function(e){
    $('.customSelect:visible').fadeOut(350);
});  

$(document).on('click','li:not(.not)',function(){
	$('.clicked').text($(this).text());
	$('.clicked').removeClass('clicked');
});