JSFiddle - React, Tailwind, and code Playground

by johnny000

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-12" id="navigation">
        <div>
            <div class="col-xs-12 bar" id="header">
                <div class="row">
                    <div class="col-xs-2"> <i class="fa fa-lg fa-bars toogle-navpanel visible-xs-inline-block"></i> 
                    </div>
                    <div id="logo" class="col-xs-10 col-sm-12"> <span>Joromo.de</span>

                        <input type="text" name="search" placeholder="Suchebegriff..." />
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6" id="filter">
                <div id="filter-panel-head"> <i class="fa fa-times toogle-filterpanel visible-xs-inline-block"></i>

                </div>
                <div class="widget">
                    <div class="container">
                        <input id="checkbox1" type="checkbox" />
                        <label for="checkbox1">Sale</label>
                    </div>
                </div>
                <div class="widget">
                    <div class="container">
                        <input id="checkbox2" type="checkbox" />
                        <label for="checkbox2">Versandkostenfrei</label>
                    </div>
                </div>
                <div class="widget">
                    <div class="container">
                        <input id="checkbox3" type="checkbox" />
                        <label for="checkbox3">Gutschein</label>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6" id="content">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content ContentContent Content Content Content Content...

SCSS

* {
    font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
html, body {
    padding:0;
    margin:0;
}
body {
    overflow-x: hidden;
}
i.fa {
    cursor:pointer;
}
.widget {
    margin:10px 0;
    label {
        font-size:2em;
        font-weight:bold;
        border-bottom:1px solid;
    }
}
.bar {
    text-align:center;
    i {
        padding:20px 0;
    }
}
#footer {
    box-shadow:0 0 3px #000;
}
#header {
    text-align:center;
    box-shadow:0 0 3px #000;
    #logo {
        span {
            height:54px;
            display:block;
            text-align:center;
            line-height:54px;
            font-weight:bold;
        }
        input {
            display:none;
            border:0px;
            border-bottom:1px solid;
            margin:10px 0;
        }
    }
}
@media screen and (max-width: 767px) {
    .bar {
        position:fixed;
        z-index:9999;
        background:white;
    }
    #header {
        top:0;
        right:0;
    }
    #footer {
        bottom:0;
        right:0;
    }
    #content {
        
        margin:54px 0;
    }
    #filter {
        display:none;
        position:fixed;
        background:grey;
        top:44px;
        left:0;
        right:0;
        bottom:0;
        z-index:9999;
    }
    .widget label {
        font-size:1.5em;
    }
}
@media screen and (min-width: 768px) {
    #filter, .widget .container {
        display:block !important;
    }
}

JavaScript

$(document)
    .on("click", ".widget .name", function () {
    $(this).next(".container").toggle();
})
    .on("click", ".toogle-filterpanel", function () {
    $("#filter").toggle();
})
    .on("click", ".toogle-search", function () {
    $("#logo span").toggle();
    $("#logo input").toggle();
});