JSFiddle - React, Tailwind, and code Playground

by Allen

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/examples/offcanvas/offcanvas.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/examples/offcanvas/offcanvas.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <p class="pull-left visible-xs">
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
    </p>
    
    <div class="col-xs-2 col-lg-3">
        <p>LOGO</p>
    </div>
    <div class="col-xs-6 col-lg-5">
        <p>SEARCH BAR</p>
    </div>
    <div class="col-xs-4 col-lg-4">
        <p>TWO LINKS</p>
    </div>
    
</div>
        
<div class="row row-offcanvas row-offcanvas-left">
    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
        <div class="list-group">
            <a href="#" class="list-group-item active">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
            <a href="#" class="list-group-item">Link</a>
        </div>
    </div><!--/span-->
    
    <div class="col-xs-12 col-sm-9">
        <div class="jumbotron">
            <h1>Hello, world!</h1>
            <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
        </div>
        <div class="row">
            <div class="col-6 col-sm-6 col-lg-4">
                <h2>Heading</h2>
                <p>Donec id...

CSS

body { padding-top: 70px; }
.navbar { color: #FFF; }
footer { padding: 30px 0; }