JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <div id='left-pannel'  style="display:none">
        AAAA

    </div>

    <div class='full'>
        <div id="nav">
            <ul>
                <li>
                    <a class="left-panel-button menu-button" id="" href="#left-panel">
                        <span class="fa fa-bars"> </span><span class="menu-words" style="padding-left:6px;">目錄</span>
                    </a>
                </li>

                <li><a href="#cart-panel" class="cart-panel-button menu-button">購物車</a></li>
                <li><a href="#">聯絡店主</a></li>
            </ul>
        </div>
        
        <div class='body-wrapper'>
            <div id="navbar-header" class="clearfix">
                <div id="logo"><img src="img/bookLogo.png" width="100px" alt=""></div>
                <div id="search"> </div>
            </div>

            <div id="navbar-menu" class='clearfix'>
                <ul class='clearfix'>
                    <li><a href="#">關於我們的事</a></li>
                    <li><a href="#">中文書籍</a></li>
                    <li><a href="#">二手書</a></li>
                    <li><a href="#">最新消息</a></li>
                    <li><a href="#">我要賣二手書</a></li>
                </ul>

            </div>

            <div id='banner'>



            </div>

            <div class='container1 container'>
                <div class='box row'>
                    <div class='left-box col-md-2'></div>
                    <div class='right-box col-md-8 '></div>
                </div>
       ...

CSS

html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    font,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        /*指定元素在父矩格中的垂直對齊方式_對齊基準線*/
        /*        background: transparent;*/
    }
    
    .full {
        width: 80%;
        margin: auto;
    }
    
    #nav ul {
        float: right;
        height: 50px;
    }
    
    #nav li {
        float: left;
        list-style: none;
        padding: 10px;
    }
    
    #nav a {
        text-decoration: none;
    }
    
    .clearfix::after {
        clear: both;
        content: "";
        display: block;
    }
    
    #navbar-menu {
        width: 100%;
        margin: auto;
        text-align: center;
    }
    
    #navbar-menu ul {
        display: inline-block;
    }
    
    #navbar-menu li {
        list-style: none;
        float: left;
        padding: 20px;
        display: inline-block;
    }
    
    #navbar-menu a {
        text-decoration: none;
    }
    
    #navbar-header logo {
        display: inline-block;
        float: left;
    }
    
    #navbar-header search {
        display: inline-block;
        float: right;
        height: 50px;
        width: 150px;
        color: antiquewhite;
    }
    
    #banner {
        width: 100%;
        margin: auto;
        height: 100px;
        background-color: #d9f0f5;
    }
    
    .container1 {
        width: 100%;
        margin: auto;
       ...

JavaScript

$(function () {
                $('.left-panel-button').sidr({
                    name: 'left-panel'
                    , side: 'left'
                    , body: ".body-wrapper"
                });
                $('.cart-panel-button').sidr({
                    name: 'cart-panel'
                    , side: 'left'
                    , body: ".body-wrapper"
                });
                $(".body-wrapper").click(function () {
                    $.sidr('close', 'left-panel');
                    $.sidr('close', 'cart-panel');
                });
            });