JSFiddle - React, Tailwind, and code Playground

by Murali Kaliappan

HTML

<div class="banner">

  <div class="property">
    <h4>
      TOTAL PRODUCTION (NOS) <br>
      <hr>
      <span class="value">112</span>
    </h4>
  </div>

  <div class="property">
    <h4>
      TOTAL REJECTION (%) <br>
      <hr>
      <span class="value">3.57 %</span>
    </h4>
  </div>

  <div class="property">
    <h4>
      TOTAL REJECTION (NOS) <br>
      <hr>
      <span class="value">4</span>
    </h4>
  </div>

  <div class="property">
    <h4>
      TOTAL LMT (NOS) <br>
      <hr>
      <span class="value">50</span>
    </h4>
  </div>

  <div class="property">
    <h4>
      NUMBER OF MOULDS <br>
      <hr>
      <span class="value">-</span>
    </h4>
  </div>

  <div class="property">
    <h4>
      TOTAL CORE SAND (TON) <br>
      <hr>
      <span class="value">10</span>
    </h4>
  </div>

  <div class="property">
    <h4>
      TOTAL PREPARED SAND (TON) <br>
      <hr>
      <span class="value">450</span>
    </h4>
  </div>
</div>

<div class="category">
  <ul>
    <li class="selected_category">Sand Defects</li>
    <li>Metal Defects</li>
    <li>Core Defects</li>
    <li>Other Defects</li>
    <li>All</li>
    <li>Unpoured Moulds</li>
  </ul>
  <div class="trigger">
    <img src='https://d30y9cdsu7xlg0.cloudfront.net/png/196765-200.png' width=25px; title='Rejection Category' />
  </div>
  
</div>

CSS

.banner {
  width: 100%;
  height: 97px;
  background-color: rgb(237, 237, 237);
  border-radius: 5px;
  margin-top:-8px;
}

.property {
  display: inline-block;
  margin-top: 7px;
  margin-left: 9px;
  text-align: center;
  padding: 0px 3px;
  background-color: white;
  border-radius: 4px;
  font-size: 13px;
  color:#8c8c8c;
  box-shadow:3px 3px 3px 3px #e2e2e2;
}

.value {
  margin-top: 5px;
  color: #8c8c8c;
}

hr {
  border-top: 0.3px solid #eee;
}
.category{
  position:absolute;
  z-index:-1;
  top:-141px;
  transition-duration:1s;
  transition-timing-function:ease-in-out;  
}
ul{  
  list-style-type:none;
  margin:0;
  padding:0;  
  width:200px;
  z-index:-1;
}
ul li{
  padding:10px 19px 10px 35px;
  border:1px solid #e6e6e6;
  border-bottom:none;
 
  text-shadow: 2px 2px 3px #c7bebe;
  color:#464545;  
}
li:first-child{
  border-top:none;
}
li:last-child{
  border:1px solid #e6e6e6;
}
li:hover{
  background-color:#e6e6e6;
  cursor:pointer;
}
.trigger{    
    border:1px solid lightgrey;
    width:28px;
    height:27px;
    margin-left:170px;
    border-top:none;    
    border-bottom-right-radius:20px;
    border-bottom-left-radius:20px;
    cursor:pointer;
}
img{
  transition-duration:1.8s;
  transition-timing-function:ease-out;
  margin-left:1.4px;
}

.selected_category{
  background-color:#e6e6e6;  
}

JavaScript

var click=0;
$("img").click(function(){
	 if (click == 0) {
    $(".category").css("transform", "translate(0px,236px)");
    $("img").css("transform", "rotateX(180deg)");
    click = 1;
  } else {
    $(".category").css("transform", "translate(0px,0px)");
    $("img").css("transform", "rotateX(0deg)");
    click = 0;
  } 
  
})


$("ul li").click(function(){
	$(".selected_category").removeClass();
  $(this).addClass('selected_category')
})