JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<div class="filters">
    <div class="a-z-search-wrapper">
        <label for="a-z-search">Search A-Z by name</label>    
        <input class="a-z-search" type="text" id="a-z-search" placeholder="Type here to search by name...">
    </div>
    <div class="or">or</div>
    <div class="lettering">
        <ul>
            <li><a href="">A</a></li> <li><a href="">B</a></li> <li><a href="">C</a></li> <li><a href="">D</a></li> <li><a href="">E</a></li> <li><a href="">F</a></li> <li><a href="">G</a></li> <li><a href="">H</a></li> <li><a href="">I</a></li> <li><a href="">J</a></li> <li><a href="">K</a></li> <li><a href="">L</a></li> <li><a href="">M</a></li> <li><a href="">N</a></li> <li><a href="">O</a></li> <li><a href="">P</a></li> <li><a href="">Q</a></li> <li><a href="">R</a></li> <li><a href="">S</a></li> <li><a href="">T</a></li> <li><a href="">U</a></li> <li><a href="">V</a></li> <li><a href="">W</a></li> <li><a href="">X</a></li> <li><a href="">Y</a></li> <li><a href="">Z</a></li>
        </ul>
    </div><!--.lettering-->
</div><!--.filters-->
<div class="category-filters">
    <form>
        <div class="checkbox academics initial">
            <input type="checkbox" id="academic" value="academic">
            <label for="academic">Academic Programs & Services</label>
        </div>                
        <div class="checkbox campus initial">
            <input type="checkbox" id="campus" value="campus">
            <label for="campus">Campus Programs & Services</label>
        </div>
        <div class="checkbox people initial">
            <input type="checkbox" id="people" value="people">
            <label for="people">People</label>    
        </div>
        <div class="checkbox building initial">
            <input type="checkbox" id="building" value="building">
            <label for="building">Campus Buildings</label>    
        </div> 
        <div class="checkbox about initial">
            <input type="checkbox" id="about" value="about">
        ...

CSS

*,
*:before,
*:after {
    box-sizing: border-box;    
}

body {
    display: block;
    margin: 0 auto;
    max-width: 1020px;
}

.filters {
    position: relative; 
    margin: 0;
    background: #eee;
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 68%, rgba(238,238,238,1) 95%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(68%,rgba(255,255,255,1)), color-stop(95%,rgba(238,238,238,1)));
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 68%,rgba(238,238,238,1) 95%);
    overflow: visible;
}

.a-z-search-wrapper {
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 20px 0 30px;
    background: #000;
}

.a-z-search-wrapper label {
    display: none;
}

input[type=text].a-z-search {
    display: block;
    margin: 0 auto;
    width: 75%; 
    padding: 20px 50px 30px 20px;
    background: transparent url('https://cdn.denison.edu/sites/all/themes/denison/images/icon_search_large_atoz.png') no-repeat right 15px;
    color: #fff;
    font-family: serif;
    font-size: 1.8em;
    font-weight: 100;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    border: 0;
    outline: none;
}

input[type=text].a-z-search::-webkit-input-placeholder {
   color: #777;
}

input[type=text].a-z-search:-moz-placeholder { /* Firefox 18- */
   color: #777;  
}

input[type=text].a-z-search::-moz-placeholder {  /* Firefox 19+ */
   color: #777;  
}

input[type=text].a-z-search:-ms-input-placeholder {  
   color: #777;  
}

.lettering {
    display: block;
    margin: 0;
    padding: 0 0 30px;
}

.or {
    display: none;
    position: absolute;
    top: -15px;
    left: calc(50% - 45px);
    width: 90px;
    height:...

JavaScript

// Resets text search field: For any click outside field
$(document).mouseup(function(e) {
    var container = $('#a-z-search');
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(container).val('');
    }    
});

// Resets text search field: For any click inside text field
$('#a-z-search').on('click', function() {
    $(this).val(''); // Clears search box on click
    $('.view-content .views-row').fadeIn(); // Show all rows if user wants to live search
    $('.category-filters .checkbox input[type=checkbox]').attr('checked', false); // Unchecks all boxes
});   

// Show/Hide types of content based on selection of checkboxes
$('.category-filters .checkbox input[type=checkbox]').each(function() {
    $(this).parent().removeClass('initial'); // Hide initial selected state on parent checkbox
    $(this).click(function() {
        if ($('.category-filters .checkbox input[type="checkbox"]:checked').length > 0) {
            $('.view-content > .views-row').fadeOut('fast');
            $('.category-filters .checkbox input[type="checkbox"]:checked').each(function() {
                $('.view-content > .views-row[data-category=' + this.id + ']').fadeIn('fast');
            });
        } else {
            $('.view-content > .views-row').fadeIn('fast');
        }
    });
});

/* A-Z: Timer delay on search field for autoscroll to results
var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();
g('#a-z-search').keyup(function() {
    delay(function(){
        //alert('Hi, function called!');
        g('html, body').animate({scrollTop: g('.view-a-to-z').offset().top - 145}, 500);
    }, 600 );
});*/ 


/**
 * HideSeek jQuery plugin
 *
 * @copyright Copyright 2013, Dimitris Krestos
 * @license   Apache License, Version 2.0 (http://www.opensource.org/licenses/apache2.0.php)
 * @link      http://vdw.staytuned.gr
 * @version   v0.5.5
 *
 *...