JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <title>Website</title>
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/srch.css">
    <link rel="stylesheet" href="styles/font-awesome.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
    <script type="text/javascript">
      $(window).load(function(){
        $("[data-toggle]").click(function() {
          var toggle_el = $(this).data("toggle");
          $(toggle_el).toggleClass("open-sidebar");
        });
         $(".swipe-area").swipe({
              swipeStatus:function(event, phase, direction, distance, duration, fingers)
                  {
                      if (phase=="move" && direction =="right") {
                           $(".container").addClass("open-sidebar");
                           return false;
                      }
                      if (phase=="move" && direction =="left") {
                           $(".container").removeClass("open-sidebar");
                           return false;
                      }
                  }
          }); 
      });
      
    </script>
  </head>
  <body>
    <div class="container">
      <div id="sidebar">
          <ul >
              <li><a href="../Site/index.html"><i class="fa fa-home">&nbsp; Home</i></a></li>
              <li><a href="#"><i class="fa fa-newspaper-o">&nbsp; News</i></a></li>
              <li><a href="#"><i class="fa fa-youtube-play">&nbsp; Videos</i></a></li>
              <li><a href="#"><i class="fa fa-cog">&nbsp; Profile</i></a></li>
          </ul>
          <form action="" method="">
            <input type="text" name="search" placeholder="Search" class="srch">
          </form>
      </div>
      <div class="main-content">
          <div class="swipe-area"></div>
          <a href="#" data-toggle=".container" id="sidebar-toggle">
              <span class="bar"></span>
        ...

CSS

@import {
    src: url(reset.css);
}
@font-face {
    font-family: proximanova;
    src: url(../fonts/proximanova.otf);
}
body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: proximanova;
    font-weight: 100;
}
/* Main */

/* Side menu*/
.container {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}
.container.open-sidebar {
    left: 240px;
}

.swipe-area {
    position: absolute;
    width: 50px;
    left: 0;
top: 0;
    height: 100%;
    background: #3a3c41;
    z-index: 0;
}
#sidebar {
    background: #2b2d31;
    position: absolute;
    width: 240px;
    height: 100%;
    left: -240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #424b5f;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
width: 100%;
}
.main-content .content h1{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
    background: #1ba8ed;
    border-radius: 3px;
    display: block;
   ...