JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<body>
  <div id="tablecontainer" class="table-panel">
    <div id="top-cell">
      <nav>
        <div class="navbar navbar-default navbar-static-top">
          <div class="container centerbrandfix"> <input type="checkbox" id="navbar-toggle-cbox">
            <div class="navbar-header"> <label type="button" for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

                                <span class="sr-only">Toggle navigation
            </span>

                                <span class="icon-bar">
            </span>

                                <span class="icon-bar">
            </span>

                                <span class="icon-bar">
            </span>
                        </label> 
            <a class="navbar-brand" href="https://miracleshack.com/">MiracleShack</a></div>
            <div id="navbar" class="navbar-collapse collapse center">
              <ul class="nav navbar-nav topnav navbar-right">
                <li class="active"><a href="https://miracleshack.com/">Home</a></li>
                <div class="buttoncontainer1">
                  <input class="gone" id="myCheck" type="checkbox" >
                  <div class="blackout" ><label class="labelBlackout" for="myCheck"></label></div>
                  <label class="mycheckButton" for="myCheck">Solutions</label>
                  <label class="mycheckDrop" for="myCheck">
                  <span class="lnkCon"><a href="#">Button 1</a></span>
                  <span class="lnkCon"><a href="#">Button 2</a></span>
                  <span class="lnkCon"><a href="#">button 3</a></span>
                  </label>
                </div>
                <li class=""><a href="https://miracleshack.com/about">About</a></li>
                <li class=""><a...

CSS

.navbar-header {
    z-index: 9999;
    position: relative;
}   

 #navbar-toggle-cbox:checked~.collapse {
      display: block;
    }

    #navbar-toggle-cbox {
      display: none;
    }
    body {
      font-family: 'Noto Serif', serif, Arial;
      font-size: 18px;
    }

    .footer {
      margin: 0;
      padding: 0;
      border-top: 1px solid #e7e7e7;
    }

    .navbar-collapse .collapse .center {
      height: 50px
    }

    .navbar-static-top {
      border-bottom: 1px solid #e7e7e7;
    }
    /* This code makes the footer have centered items.  It does this because by calling all divs that must have both .navbar and .center, or by calling all divs with .navbar-inner.  */

    .navbar.center .navbar-inner {
      text-align: center;
    }

    .navbar.center .navbar-inner .nav {
      float: none;
      display: inline-block;
      vertical-align: top;
    }
    /* Adds light hover color to navbar menu items */

    .navbar-default .navbar-nav>li>a:hover,
    .navbar-default .navbar-nav>li>a:focus {
      background-color: #F1F1F1;
      color: #666;
    }
    /* Custom: For smallest screen size */

    @media (min-width: 1px) and (max-width:319px) {
      /* This code centers the top navbar items when it's collapsed.  Whether they are stacked vertically or horizontally.  Use for whenever the hamburger button appears. */
      .navbar .navbar-nav {
        display: inline-block;
        float: none;
      }
      .navbar .navbar-collapse {
        text-align: center;
      }
    }
    /* Center Brand */

    @media (min-width: 320px) and (max-width: 767px) {
      .navbar .navbar-brand,
      .navbar-collapse {
        float: none;
        display: inline-block;
        *display: inline;
        /* ie7 fix */
        *zoom: 1;
        /* hasLayout ie7 trigger */
        vertical-align: top;
      }
      .centerbrandfix {
        text-align: center;
      }
    }

    @media (max-width: 979px) {
      .navbar .navbar-brand,
      .navbar-collapse {
  ...