JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<div class="btn-popup">
  <a class="btn">click me</a>
  <div class="custom-popup">
    <ul>
      <li>English</li>
      <li>Hindi</li>
      <li>Tamil</li>
    </ul>
  </div>
</div>

CSS

.btn-popup>a.btn {
    background: #457bf3;
    color: rgb(255, 255, 255);
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
}
.custom-popup {
    background-color: rgb(255, 255, 255);
    position: absolute;
    min-width: 120px;
    padding: 10px;
    box-sizing: border-box;
    transform: translateY(-21px);
    opacity: 0;
    z-index: -1;
    transition: transform 0.1s ease;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.04), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.02);
}
.custom-popup.show {
    transform: translateY(10px);
    opacity: 1;
    z-index: 1;
}
.custom-popup ul {
    margin: 0;
    padding: 0;
}
.custom-popup ul li {
    list-style-type: none;
    padding: 4px 0;
    cursor: pointer;
}

JavaScript

$(document).ready(function(){
$(".btn-popup>a.btn").on("click",function(){
$(this).siblings(".custom-popup").toggleClass("show");
});	
$(".custom-popup ul li").on("click",function(){
$(this).parents(".custom-popup").removeClass("show");
});
});