JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="searchBar">
		<span class="filters">
			Filter: <span class="filter-btn sc-common">Common</span><span class="filter-btn sc-publish">Published</span><span class="filter-btn sc-draft">Draft</span><span class="filter-btn sc-bridge">Bridge</span><span class="filter-btn sc-locfav">Locked</span><span class="filter-btn sc-locfav">Favourites</span>
		</span>
		<input type="text" placeholder="Filter..." id="search">
		<i class="fas fa-search"></i>
		<i class="fas fa-folder"></i>
				<span class="sort"><a><i class="fas fa-sort-amount-down"></i></a>
					<div class="sort-dropdown">
						    <ul>
						        <li><strong>Sort by...</strong></li>
						        <hr>
						        <li>Name</li>
						        <li>Recently Used</li>
						        <li>Recently Changed</li>
						        <li>Recently Recalculated</li>
						        <li>Recently Downloaded</li>
						        <li>Downloadable</li>
						        <li>Recalculated Today</li>
						    </ul>
					</div> 
				</span>
		
		<i class="fas fa-th-large"></i>

	</div>

<div class="sub-cont sub-container-full">
			<div class="group favourites">
				<div class="row-head top-none"><i class="fas fa-sort-amount-down"></i> Favourites</div>
				<div class="row-titles"><span class="list-col-1"><i class="fas fa-sort-amount-down"></i>Name</span><span class="list-col-2"><i class="fas fa-sort-amount-down"></i>Modified</span><span class="list-col-3"><i class="fas fa-sort-amount-down"></i>Path</span><span class="list-col-4"><i class="fas fa-sort-amount-down"></i>File Type</span><span class="list-col-5"><i class="fas fa-sort-amount-down"></i>Lock</span></div>
				<!-- ITEM -->
				<div class="row sortable-row">
					<div class="thumbnail">
						<img src="img/img-test.jpg" class="thumb">
					</div>
					<div class="details">
						<span class="list-col-1 cname"><i class="fas fa-star starOn"></i> Forbes <span class="common...

CSS

*{
	margin:0;
	padding:0;
}
body {
    background: #f1f1f1;
    overflow:hidden;
    color:#454545;
    /*font-family: 'Open Sans', sans-serif;*/
    font-family: 'Lato', sans-serif;
    -ms-transform:scale(1); // Req for IE9
    transform:scale(1);
}

.navbar{
	width:100vw;
	height:50px;
	background:#3d3d3d;
	margin-bottom: 10px;
}
.nav-btn-right {
    background: #5c5c5c;
    padding: 16px;
    color: #fff;
    float: right;
    margin-left: 2px;
    font-size: 14px;
    cursor: pointer;
}
.nav-btn-right .fa-caret-down {
    margin-left: 5px;
}
.nav-btn {
    background: #5c5c5c;
    padding: 16px;
    color: #fff;
    margin-left: 2px;
    font-size: 14px;
    cursor: pointer;
    float: left;
}
.nav-rep-name {
    color: #fff;
    padding: 10px;
    float: left;
    border-left: 1px solid #616161;
    margin: 5px;
}
.acc-select {
    width: 270px;
}
.acc-select-text {
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    float: left;
    margin-right: 10px;
}
.acc-select-text2 {
    margin: 0 10px;
}






.blue{
	background: #00aeef;
    color: #fff;
}
.blue .logo{
	border-right: 1px solid #fff;
}
.blue .userName{
	border-left: 1px solid #fff;
}
.logo {
    font-family: Lato;
    font-size: 20px;
    padding-left: 20px;
    line-height: 50px;
    padding-right: 25px;
    color: #f1f1f1;
    font-weight: 600;
    float: left;
}
.logo-cli {
    font-family: Lato;
    font-size: 20px;
    padding-left: 20px;
    line-height: 50px;
    padding-right: 25px;
    color: #00aeef;
    font-weight: 600;
}
.userName {
    float: right;
    line-height: 44px;
    font-size: 14px;
    padding-right: 15px;
    margin-top: 4px;
    padding-left: 25px;
    height: 44px;
    border-left: 1px solid #454545;
}
.userName img {
    padding-top: 8px;
    float: right;
    padding-left: 10px;
    height: 28px;
}
.searchBar{
	width: 80%;
    margin: 0 auto;
	text-align: right;
	margin-bottom:3px;
}
.searchBar...

JavaScript

//Define your buttons filters
$filterBtn1 = 'common';
$filterBtn2 = 'published';
$filterBtn3 = 'draft';
$filterBtn4 = 'bridge';
$filterBtn5 = 'locked';
$filterBtn6 = 'favourites';

//Define your buttons filters
$Btn1 = '.filters .sc-common';
$Btn2 = '.filters .sc-published';
$Btn3 = '.filters .sc-draft';
$Btn4 = '.filters .sc-bridge';
$Btn5 = '.filters .sc-locfav';
$Btn6 = '.filters .sc-locfav';

$($Btn1).on('click', function(){
  if ( $('.sortable-row').attr('data-type') == $filterBtn1 ) {
    $( ".sortable-row[data-type*="+ $filterBtn1 +"]" ).toggle();
} else {
    $( ".sortable-row[data-type!="+ $filterBtn1 +"]" ).toggle();
}
});

$($Btn2).on('click', function(){
  if ( $('.sortable-row').attr('data-type') == $filterBtn2 ) {
    $( ".sortable-row[data-type*="+ $filterBtn2 +"]" ).toggle();
} else {
    $( ".sortable-row[data-type!="+ $filterBtn2 +"]" ).toggle();
}
});