JSFiddle - React, Tailwind, and code Playground

by fkhairzad

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.0/list.min.js"></script>
<div id="lovely-things-list" class="container">
    <div class="header">
        <input class="search" placeholder="Search Here Bro!" />
        <select name="dropdown">
            <option value="none">Show All</option>
            <option value="games">Games</option>
            <option value="beverages">Beverage</option>
        </select>
    </div>
    <div class="list" id="results">
        <div class="item">
            <div class="divTitle">
                <div id="Game" class="feature"></div> <span class="name">Monkey Island 2: LeChuck's Revenge</span>  <span class="category">Game</span>

            </div>
            <div class="divBody">
                <p class="description">Monkey Island 2: LeChuck's Revenge is an adventure game developed and published by LucasArts in 1991. It was the second game of the Monkey Island series, following The Secret...</p>
            </div>
        </div>
        <div class="item">
            <div class="divTitle">
                <div class="misc"></div> <span class="name">Good Coffee</span>  <span class="category">Beverage</span>

            </div>
            <div class="divBody">
                <p class="description">Coffee is a brewed beverage with a dark, slightly acidic flavor prepared from the roasted seeds of the coffee plant, colloquially called coffee beans.</p>
            </div>
        </div>
        <div class="item">
            <div class="divTitle">
                <div class="suggestion"></div> <span class="name">Full Throttle</span>  <span class="category">Game</span>

            </div>
            <div class="divBody">
                <p class="description">Full Throttle is a computer adventure game developed and published by LucasArts. It was designed by Tim Schafer, who would later go on to design the critically acclaimed titles Grim Fandango, Psychonauts and Brütal Legend.</p>
            </div>
       ...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400, 100, 100italic, 300, 300italic, 400italic, 500, 700, 500italic, 900, 700italic, 900italic);
 * {
    font-family:'Roboto', sans-serif;
    line-height: 1.2;
    vertical-align: middle;
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    background-image: url("https://googledrive.com/host/0B5ZPhXd3Y-xIbmNVOURTRVFkYjg/bg.png");
}
.header {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-image: url("https://googledrive.com/host/0B5ZPhXd3Y-xIbmNVOURTRVFkYjg/grey.png");
    border-bottom: 2px solid #c6c6c6;
    padding: 10px 0 0 0;
    text-align: center;
    z-index: 10;
}
.filterinput {
    margin: auto;
    width: 275px;
}
#results {
    margin-top: 45px;
    padding: 8px 12px;
}
#results .item {
    width: 100%;
    box-shadow: 0 1px 2px #aaa;
    background-image: url("https://googledrive.com/host/0B5ZPhXd3Y-xIbmNVOURTRVFkYjg/white.png");
    margin: 8px 0;
    border-radius: 3px;
    word-wrap: break-word;
    float: left;
    position: relative;
    z-index: 5;
    padding-bottom: 5px;
}
div.item:hover input {
    display: block;
}
div.item input {
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
}
#results .item code {
    font-family: consolas, inconsolata, monospace;
    font-style: italic;
}
#results .item .todo {
    background-color: #F8FFCC;
    border: 0px;
}
#results .item .divTitle {
    font-size: 16px;
    font-weight: 400;
    padding: 10px 0 0;
    margin: 10px;
    font-family:'Roboto', sans-serif;
    line-height: 1.2;
    vertical-align: middle;
}
#results .item .divBody {
    border-top: 1px solid #c6c6c6;
    border-left: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;
    padding: 10px;
    margin: 10px;
    font: 8px;
    font-weight: 100;
    font-family:'Roboto', sans-serif;
    line-height: 1.2;
    vertical-align:...

JavaScript

/*
 * LOVELY THINGS
 */

var options = {
    valueNames: ['name', 'description', 'category']
};

var featureList = new List('lovely-things-list', options);


$('select[name="dropdown"]').change(function () {
    if ($(this).val() == "games") {
        featureList.filter(function (item) {
            if (item.values().category == "Game") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    }
});

$('select[name="dropdown"]').change(function () {
    if ($(this).val() == "beverages") {
        featureList.filter(function (item) {
            if (item.values().category == "Beverage") {
                return true;
            } else {
                return false;
            }
        });
        return false;
    }
});

$('select[name="dropdown"]').change(function () {
    if ($(this).val() == "none") {
        featureList.filter();
        return false;
    }
});