JSFiddle - React, Tailwind, and code Playground

by Pavlo

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="nav-shop" class="panel-collapse collapse">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-9 col-xs-12">
                    <div class="items">
                        <div class="item">
                            <div class="image pull-left">
                                <img class="img-responsive" alt="a" src="images/product.png">
                            </div>

                            <div class="text pull-left">
                                <p>Lorem Ipsum Dolor consecteur </p>
                                <p>$79/QUANTITY: 1</p>
                                <h6 class="main-text-color"><a href="#">Clear</a> <i class="fa fa-times-circle-o"></i></h6>
                            </div>
                        </div>

                        <div class="item">
                            <div class="image pull-left">
                                <img class="img-responsive" alt="a" src="images/product.png">
                            </div>

                            <div class="text pull-left">
                                <p>Lorem Ipsum Dolor consecteur </p>
                                <p>$79/QUANTITY: 1</p>
                                <h6 class="main-text-color"><a href="#">Clear</a> <i class="fa fa-times-circle-o"></i></h6>
                            </div>
                        </div>

                        <div class="item">
                            <div class="image pull-left">
                                <img class="img-responsive" alt="a" src="images/product.png">
                            </div>

                            <div class="text pull-left">
                                <p>Lorem Ipsum Dolor consecteur </p>
           ...

JavaScript

$('html').click(function () {
    $(".shopbar a").addClass("collapsed");
    if ($("#nav-shop").hasClass("in")) {
        $("#nav-shop").collapse('hide');
    }   

    if ($("#search").hasClass("in")) {
        if (!$("#search .drop-down").is(":hover")){
            $("#search").collapse('hide');
        }        
    }
});

$("#nav-shop").click(function (event) {    
    event.stopPropagation();
});

$("#search").click(function (event) {    
    event.stopPropagation();
});