JSFiddle - React, Tailwind, and code Playground

by suri_295

HTML

<div class="container">
    <div class="button">Card List</div>
    <div class="overlay"></div>
    <div class="popup">
        <div class="button"><a href="#"> item1</a></div>
        <div class="button"><a href="#"> item2</a></div>
        <div class="button"><a href="#"> X </a></div>
    </div>
</div>

CSS

.container {
    overflow:hidden;
    height: 60px;
}
.button {
    position: relative;
    top: 0;
    background-color: #000;
      z-index: 1;
    cursor:pointer;
    color:#fff;
    padding:5px;
}
.popup {
    position: fixed;
    bottom: -70px;
    background-color: yellow;
    z-index: -1;
    -webkit-transition: bottom 1s;
    -moz-transition: bottom 1s;
    -o-transition: bottom 1s;
    transition: bottom 1s;
    width:100%;
    height:50px;
    z-index:2;
    padding:5px;
}
.button a {    
    color:#fff;  
}
.overlay{
    position:absolute;
    top:0;
    left:0;
    background-color: #000;
    opacity:0.5;  
    width:100%;
    height:100%;
    display:none;
    z-index:1
}

JavaScript

var clicked=true;
$(".button,.overlay").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".popup").css({"bottom": "25px"});
        $(".overlay").css({"display": "block"});
 
    }
    else
    {
        clicked=true;
        $(".popup").css({"bottom": "-70px"});
        $(".overlay").css({"display": "none"});
       

    }
});