JSFiddle - React, Tailwind, and code Playground

by Darko

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<div class="navmenu navmenu-default navmenu-fixed-left offcanvas"> <a class="navmenu-brand" href="#">Project name</a>

  <ul class="nav navmenu-nav">
    <li><a href="../navmenu/">Slide in</a>

    </li>
    <li class="active"><a href="./">Push</a>

    </li>
    <li><a href="../navmenu-reveal/">Reveal</a>

    </li>
    <li><a href="../navbar-offcanvas/">Off canvas navbar</a>

    </li>
  </ul>
  <ul class="nav navmenu-nav">
    <li><a href="#">Link</a>

    </li>
    <li><a href="#">Link</a>

    </li>
    <li><a href="#">Link</a>

    </li>
    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

      <ul class="dropdown-menu navmenu-nav">
        <li><a href="#">Action</a>

        </li>
        <li><a href="#">Another action</a>

        </li>
        <li><a href="#">Something else here</a>

        </li>
        <li class="divider"></li>
        <li class="dropdown-header">Nav header</li>
        <li><a href="#">Separated link</a>

        </li>
        <li><a href="#">One more separated link</a>

        </li>
      </ul>
    </li>
  </ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
      </button> <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav...

CSS

body {
  padding-top: 50px;
}

.content_wrap {
  padding: 40px 15px;
  text-align: center;
}

footer {
  background-color: #222;
  color: #777;
}


/*  * Off Canvas  * --------------------------------------------------
					*/

@media screen and (max-width: 768px) {
  .row-offcanvas {}
  #sidebar {
    display: none;
  }
  #sidebar.in {
    display: block;
    position: fixed;
    z-index: 1030;
    top: 0px;
    bottom: 0px;
    overflow-y: auto;
    border-radius: 0px;
    padding: 0px;
    min-height: 100%;
    width: 300px;
  }
  #sidebar.in .well {
    margin: 0px;
    border-radius: 0px;
    border: none;
    min-height: 100%;
  }
}