JSFiddle - React, Tailwind, and code Playground

by Pamela Cook

HTML

<script src="bootstrap.min.css "></script>
<script src="bootstrap.min.js"></script>
<script src="jquery-2.2.4.js"></script>
<link rel="stylesheet" href="font-awesome.min.css">
<div class="row">
  <div class="col-sm-12" align="center" id="menu-line">
    <div class="menu-link"><a id="menu-toggle" href="#menu-toggle"><i class="fa fa-bars"></i> MENU</a></div>
    <div class="page-class">
      <div class="row">
        <div class="col-sm-4" align="center"><a href="https://google.com">Google</a></div>
        <div class="col-sm-4" align="center"><a href="https://yahoo.com">Yahoo</a></div>
        <div class="col-sm-4" align="center"><a href="http://eepurl.com/cGnzDf">Join Our Mailing List</a></div>
      </div>
    </div>
  </div>
</div>

CSS

.menu-link { padding-left: 20px; position: absolute; left: 15px; top: 0px; z-index: 1; #menu-toggle { color: #fe41ff; text-decoration: none !important; } }
.menu-link:hover, .menu-link:visited, .menu-link:focus, .menu-link.active:focus { i, #menu-toggle { color: #ffff00; text-decoration: none !important; } }
.page-class { width: 100%; }

JavaScript

$("#menu-toggle, #toggleback").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});