JSFiddle - React, Tailwind, and code Playground

by dj19910501

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="filterPanel">
   <div id="savedFilters" class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button"data-toggle="dropdown">
      <span>My Favorite Filters</span>
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">Saved 1</a></li>
        <li><a href="#">Saved 2</a></li>
        <li><a href="#">Saved 3</a></li>
      </ul>
  </div> 
  <div id="content">
    <div id="filterTabs">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Plans (2/4)</a></li>
        <li><a data-toggle="tab" href="#menu1">Filters (18/36)</a></li>
      </ul>

      <div class="tab-content">
        <div id="plans" class="tab-pane fade in active">
          <div class="group-select">
            <span>Select All</span> | <span>Clear All</span>
          </div>
          <div id="filterByYear" class="filter-block">
            <div class="block-header">
              <span>Select Years (4/4)</span>
              <span class="glyphicon glyphicon-menu-up"></span>
              <span class="glyphicon glyphicon-menu-down hide"></span>
            </div>
            <div class="block-content">
              <div class="group-select">
                <span>Select All</span> | <span>Clear All</span>
              </div>
              <div class="block-items">
                  <div class="checkbox">
                    <label><input type="checkbox" value="">2013</label>
                  </div>
                  <div class="checkbox">
                    <label><input type="checkbox" value="">2014</label>
                  </div>
                  <div class="checkbox">
                    <label><input type="checkbox"...

CSS

#filterPanel{
  margin: 20px 0 20px 10px;
  width: 300px;
  height: 800px;
  background-color: rgb(217,219,220);
}
#filterPanel hr{
  color:red;
}
#savedFilters {
  height: 55px;
}
#savedFilters button{
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  height: 35px;
  padding-left: 10%;
  background-color: rgb(230,230,230);
  border: solid 1px rgb(194,194,194);
  color: black;
  text-align: left;
}
#savedFilters button span:first-child{
  display: inline-block;
  width: 95%;
}

#content{
  height: 695px;
  background-color: rgb(240,240,240);
}
#filterTabs *{
  color: black;
}
#filterTabs ul li{
  width: 50%;
}
#filterTabs ul li a{
  border-radius: 0;
  border: 0;
  text-align: center;
  margin: 0;
  border-top: 5px solid rgb(217,219,220);
  line-height: 10px;
}
#filterTabs li.active a{
  box-sizing: border-box;
  background-color: rgb(240,240,240);
  font-weight: bold;
  border-color: #89CEDE;
}
#filterTabs li:not(.active) a{
  background-color: rgb(217,219,220);
}
.tab-content{width: 90%; margin-left: 5%;}
.group-select{font-size: 10px; text-align: right; width: 100%; padding: 10px 0px 0px 0px;}
.group-select span{ cursor: pointer;}

.block-content{ border-top: 2px solid rgb(217,219,220); }






#bottomSection{
  height: 50px;
}
.bottomButton{
  width: 95%;
  height: 35px;
  margin-left:2.5%;
  margin-top:7.5px;
  color: white;
  background-color: #89CEDE;
}

JavaScript

var data = [
	{ year: 2015, make: "Mercedes", Model: "S550", price: "55000" },
  { year: 2015, make: "Mercedes", Model: "S550", price: "55000" },
  { year: 2015, make: "Mercedes", Model: "S550", price: "55000" },
  { year: 2015, make: "Mercedes", Model: "S550", price: "55000" },
];