JSFiddle - React, Tailwind, and code Playground

by hexzero

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css">
<div class="container">
  <div class="row button-container">
    <div class="col filter-container">
      <div id="sideExpand">
      <select>
          <optgroup label="This is a group">
            <option value="12" selected>This is item 1</option>
            <option value="13">This is item 2</option>
            <option value="14">This is item 3</option>
          </optgroup>
        </select>
        <select>
          <optgroup label="This is a group">
            <option value="12" selected>This is item 1</option>
            <option value="13">This is item 2</option>
            <option value="14">This is item 3</option>
          </optgroup>
        </select>
        <select>
          <optgroup label="This is a group">
            <option value="12" selected>This is item 1</option>
            <option value="13">This is item 2</option>
            <option value="14">This is item 3</option>
          </optgroup>
        </select></div>
      <button class="btn btn btn-transparent btn-icon" id="filterToggle" onclick="SetActiveDiv('sideExpand',this)"><i class="fa fa-filter" ></i></button>
    </div>
  </div>
</div>

CSS

#sideExpand {
  display:flex;
  width: 100%;
  height: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) );
  border-radius: 35px;
  background-color: rgba(31, 45, 65, 0.125);
  transition: transform 1s ease-in;
  transform: translateX(100%);
  z-index: -1;
}

#sideExpand.slide{
  transform: translateX(0%);
}

.filter-container{
  padding: .3rem;
  display: flex; 
  justify-content: flex-end;
  overflow: hidden;
}

select {
  border: 0;
  background-color: initial;
  font-size: 100%;
  display: block;
  margin: auto;
  word-wrap: normal;
}

#filterToggle{
  background: white;
  font-size: 150%;
  border: .2rem solid #c1c1c1;
}

#filterToggle::after{
  position:absolute;
  content: "";
  height: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) );
  width: 4rem;
  background:white;
  right: -2rem ;
  z-index: -1;
}

.btn-icon {
  padding: 0;
  display: -webkit-inline-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-self: right;
  justify-content: center;
  overflow: hidden;
  border-radius: 100%;
  flex-shrink: 0;
  height: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) ) !important;
  width: calc( (1rem * 1.5) + (0.5rem * 2) + (2px) ) !important;
}

JavaScript

function SetActiveDiv(ID, bt) {
  var element = document.getElementById(ID);
  if (element) {
   element.classList.toggle("slide")
   return true
  }
  return console.log(ID, " not found!");
}