JSFiddle - React, Tailwind, and code Playground

by MrTest

HTML

<div class="filter">
        <a class="dropDownSelect" href="#"> -- select -- </a>
        <ul class="dropDownList">
            <li><span class="filter0">All</span></li>
            <li><span class="filter1">Filter 1</span></li>
            <li><span class="filter2">Filter 2</span></li>
            <li><span class="filter3">Filter 3</span></li>
            <li><span class="filter4">Filter 4</span></li>
        </ul>
    
    </div>    
    <div class="tab-menu">
    </div>
    
    <div class="content">
        <div class="filter1">1</div>
        <div class="filter1">1</div>
        <div class="filter1">1</div>
        
        <div class="filter2">2</div>
        <div class="filter2">2</div>
        <div class="filter2">2</div>
        <div class="filter2">2</div>
        <div class="filter2">2</div>
        
        <div class="filter3">3</div>
        <div class="filter3">3</div>
        <div class="filter3">3</div>
        <div class="filter3">3</div>
        
        <div class="filter3">3</div>
        <div class="filter3">3</div>
        <div class="filter3">3</div>
        <div class="filter3">3</div>
        
        <div class="filter3">3</div>
        
        <div class="filter4">4</div>
        <div class="filter4">4</div>
        <div class="filter4">4</div>
        <div class="filter4">4</div>
        
        <div class="filter4">4</div>
        <div class="filter4">4</div>
        <div class="filter4">4</div>
        <div class="filter4">4</div>
        
        <div class="filter4">4</div>
        <div class="filter4">4</div>
        <div class="filter4">4</div>
        <div class="filter4">4</div>
        
        <div class="filter4">4</div>
    </div>
    
    <div class="clr"></div>
    
    <ul class="pagination">
        <li><a href="#1">Page 1</a></li>
        <li><a href="#2">Page 2</a></li>
        <li><a href="#3">Page 3</a></li>
        <li><a href="#4">Page 4</a></li>
        <li><a href="#5">Page 5</a></li>
        <li><a...

CSS

@charset "utf-8";
/*! Reset
---------------------------------------------*/
* { margin: 0px; padding: 0px; border: none; outline: none; text-decoration: none; list-style: none;}

/*! General
---------------------------------------------*/
body { background: #eeeeee;}
.cnt { width: 960px;}
.clr { display: block; width: 100%; clear: both; height: 0px;}
.fleft { float: left;}
.fright { float: right;}

.filter { padding: 20px 20px 20px 100px; height: 55px; border-bottom: 1px solid #fff; box-shadow: 0px 0px 2px #ddd;}

.dropDownSelect { border: 1px solid #ccc; display: block; width: 150px; height: 19px; font-size: 15px; padding: 2px; text-align: center; color: #444; background-color: #fff; background-image: url(http://dl.dropbox.com/u/17683975/dropdown.png); background-repeat: no-repeat; background-position: 133px 3px; }
.dropDownOpen { border-bottom: 0px !important;}

.dropDownList { position: relative; z-index: 100; display: none; height: auto; line-height: 19px; font-size: 15px; padding: 2px; width: 150px; background: #fff; border: 1px solid #ccc; border-top: 0px; margin: -1px 0px 0px 0px;}
.dropDownList li { text-align: center; }
.dropDownList li:hover { background: #f3f3f3; cursor: pointer; }

.content { padding: 20px 20px 20px 100px; width: 400px;}
.content div { width: 178px; margin: 10px; display: inline-block; float: left; height: 125px; font-size: 30px; text-align: center; line-height: 125px; border: 1px solid #ccc; background: #fff; box-shadow: 0px 0px 5px #ddd;}

.pagination { display: block; padding: 20px 20px 20px 100px; margin-bottom: 100px auto;}
.pagination li { display: inline-block ; float: left;}
.pagination li a { display: none; margin: 0 10px; padding: 2px; line-height: 19px; font-size: 15px; border: 1px solid #ccc; background: #fff; color: #444; box-shadow: 0px 0px 2px #ddd; border-radius: 3px;}

JavaScript

(function($){  
    $.fn.CreateTabs = function(){  
    
        var CoundNumberOfDivs = $('.content div:visible').length;
                
        if( CoundNumberOfDivs <= 4 ) { 
            $('.pagination li a').hide(); 
            return false;
        }
        else if( CoundNumberOfDivs <= 8 ) { 
            $('.pagination li a').hide();
            $('.pagination li a:lt(2)').show(); 
            
            $('.content div.current-filter').hide();
            $('.content div.current-filter:lt(4)').show();
        }
        else if( CoundNumberOfDivs <= 12 ) { 
            $('.pagination li a').hide();
            $('.pagination li a:lt(3)').show(); 
            
            $('.content div.current-filter').hide();
            $('.content div.current-filter:lt(4)').show();
        }
        else if( CoundNumberOfDivs <= 16 ) { 
            $('.pagination li a').hide();
            $('.pagination li a:lt(4)').show();
            
            $('.content div.current-filter').hide();
            $('.content div.current-filter:lt(4)').show(); 
        }
        else if( CoundNumberOfDivs <= 20 ) { 
            $('.pagination li a').hide();
            $('.pagination li a:lt(5)').show();
            
            $('.content div.current-filter').hide();
            $('.content div.current-filter:lt(4)').show(); 
        }
        
        else if( CoundNumberOfDivs <= 24 ) { 
            $('.pagination li a').hide();
            $('.pagination li a:lt(6)').show();
            
            $('.content div.current-filter').hide();
            $('.content div.current-filter:lt(4)').show(); 
        }
        
        else if( CoundNumberOfDivs <= 28 ) { 
            $('.pagination li a').hide();
            $('.pagination li a:lt(7)').show();
            
            $('.content div.current-filter').hide();
            $('.content div.current-filter:lt(4)').show(); 
        }
        
        else if( CoundNumberOfDivs <= 32 ) { 
            $('.pagination li...