JSFiddle - React, Tailwind, and code Playground

by artoo

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div id="toggle_controls"></div>
  </div>
</div>


<div class="container my-8 controls clearfix" id="controls">
  <div class="row">

    <div class="col-md-8">



      <!--FONT STUFF-->



      <div class="row widget py-4">
        <div class="col-md-6">


          <!--Dropdown primary-->
          <div class="dropdown" id="myDropdown">

            <!--Trigger-->
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Font Family</button>


            <!--Menu-->
            <div class="dropdown-menu dropdown-primary scrollable-menu">
              <a class="dropdown-item" style="font-size:16px; font-family:ABeeZee" rel="0" value="ABeeZee">ABeeZee</a><a class="dropdown-item" style="font-size:16px; font-family:Abel" rel="1" value="Abel">Abel</a><a class="dropdown-item" style="font-size:16px; font-family:Abhaya Libre"
                rel="2" value="Abhaya Libre">Abhaya Libre</a><a class="dropdown-item" style="font-size:16px; font-family:Abril Fatface" rel="3" value="Abril Fatface">Abril Fatface</a><a class="dropdown-item" style="font-size:16px; font-family:Aclonica"
                rel="4" value="Aclonica">Aclonica</a><a class="dropdown-item" style="font-size:16px; font-family:Acme" rel="5" value="Acme">Acme</a><a class="dropdown-item" style="font-size:16px; font-family:Actor" rel="6" value="Actor">Actor</a><a class="dropdown-item"
                style="font-size:16px; font-family:Adamina" rel="7" value="Adamina">Adamina</a><a...

CSS

.widget {
  background-color: #ccc;
  z-index: -1
}

.controls {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: -10;
  transform: translatex(-110%);
  transition: transform 0.5s ease-in-out;
  z-index: 300 ! important
}

.show {
  transform: translatex(0%);
  transition: transform 0.3s ease-in-out
}

#toggle_controls {
  z-index: 2000;
  position: absolute;
  left: 5px;
  top: 5px;
  width: 30px;
  height: 30px;
  background-color: #ee2200;
  border-radius: 15px;
  border: #222 1px solid
}

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
}

.of-vis {
  overflow: visible
  }


.col-md-6 {z-index:1}

JavaScript

$("#toggle_controls").on('click', function() {
  $(".controls").toggleClass("show");


});