JSFiddle - React, Tailwind, and code Playground

by Murali Kaliappan

HTML

<div>
  <button type="button">Rejection category </button> 
 
</div>
<div class="banner-box rotate">
  <ul>
    <li>Sand Defects</li>
    <li>Metal Defects</li>
    <li>Core Defects</li>
    <li>Other Defects</li>
    <li>All Defects</li>
    <li>Unpoured Mould</li>
  </ul>
</div>

CSS

*{
  font-family:'Times';
}
button{
  position:relative;  
  padding:18px 16px;
  background-color:rgba(28, 144, 212, 0.83);
  color:white;
  border:1px solid white;
  border-radius:5px;  
  outline:none;
  
  font-size:18px;  
  cursor:pointer;
  margin-left:45%;
  margin-top:1%;   
}
button:active{
  background-color:#e2e2e2;
}

.banner-box{
  position:relative;
  display:block;
  height:232px;
  width:220px;
  border:1px solid #cec9c9;
  border-radius:10px;
  margin-left:42.3%;
  margin-top:1%;
  box-shadow:-5px 5px 6px #e2e2e2;

}
.banner-box:after{
  content:"";
  position:absolute;
  bottom:100%;
  left:47%;
  border-width:7px;
  border-style:solid;
  border-color:transparent transparent #cec9c9 transparent;
}
ul{
  position:relative;
  list-style:none;  
  margin:4px 14px 4px -30px;
}
li{  
  position:relative;
  padding:13.5px 0px 3.5px 50px;
  color:#352a2a;
  border-bottom:1px solid #eae6e6;
  letter-spacing:0.8px;
  word-spacing:4px;
}
li:before{
  content:'';
  left:0;
  bottom:0;
  visibility:hidden;
  position:absolute;
  width:100%;
  height:1.5px;
  transform:scaleX(0);
  transition:all 0.3s  ease-in-out ;  
  color:#e2e2e2;
  background-color:rgba(28, 144, 212, 0.83);
  
}
li:last-child{
  border-bottom:none;
}
li:hover{
  cursor:pointer;  
  border-bottom:none;
}
li:not(:last-child):hover:before{
  visibility:visible;
  transform:scaleX(1);
}
.rotate{ 
  opacity:0;
  visibility:hidden;
  transform:rotateY(180deg);
  transition:all 0.3s linear;   
 
}

.rotate-dis{
  opacity:1;  
  transform:rotateY(360deg);  
  transition:all 0.3s linear;     
}
.active-rejection{  
  
}

JavaScript

var click=1;
$("button").click(function(){
	if(click==0){
  $('.banner-box').removeClass('rotate-dis').addClass('rotate');
  
  click=1;
	} else {    
  $(".banner-box").removeClass('rotate').addClass("rotate-dis");    
  click=0;
  }
})

$("li").click(function(){
	
})