JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="dummy_header">

<div id="cs_tog" class="cs_filter">

<div class="cs_filter_but" onclick="cs_tog()">Filter Case Studies:</div>

<div class="cs_filter_drop">
<div class="cs_filter_item">All Case Studies</div>
<div class="cs_filter_item">Bridging Loans</div>
<div class="cs_filter_item">Development Finance</div>
<div class="cs_filter_item">Secured Loans</div>
<div class="cs_filter_item">Commercial Mortgages</div>
<div class="cs_filter_item">Lifetime Mortgages</div>
</div>

</div>


</div>

<div class="content">This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content </div>

CSS

.dummy_header {height:200px;background-color:yellow;position:relative;}

.cs_filter {position:absolute;top:100%;left:0;right:0;margin-top:-50px;}

.cs_filter_but {display:none;}

.cs_filter_drop {
display: flex;
justify-content: center;  
 /* flex-flow: row wrap; */ 
 flex-direction: row; 
flex-wrap: wrap;
gap:5px 20px;}


@media only screen and (max-width: 600px) {
.cs_filter_but {display:block;}
.cs_filter_drop {display:none;}

.cs_filter {max-width:200px;margin:-70px auto auto auto;padding:15px;background-color:#ffffff;border-radius:10px;border:solid blue;border-width:0 0 0 3px;}

.cs_tog {border-radius:10px;-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);}
.cs_tog div:nth-child(2) {display:block;}
.cs_filter_item {padding-top:15px;}
}

JavaScript

function cs_tog() {
var cs_tog = document.getElementById('cs_tog');

if (cs_tog.className == "cs_filter") {cs_tog.className = "cs_filter cs_tog"}
else {cs_tog.className = "cs_filter"}

}