JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="header">
    <h1>Language List</h1>
    <h2>Find the language that's best for you.</h2>
</div>
<div class="centered">
    <a href="#" id="startFilter">Filter Languages</a>
</div>
<div class="filter centered">Platform: 
    <select id="platform">
        <option name="web">Web</option>
        <option name="desktop">Desktop</option>
        <option name="mobile (app)">Mobile</option>
    </select>
</div>
<ul id="languageList"></ul>
<div class="footer">Created by <a href="http://scratch.mit.edu/users/PullJosh">PullJosh</a>, with extensive help from the Scratch community.</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

html, body {
    margin:0px;
    padding:0px;
    font-family:'Open sans', sans-serif;
    color:#333; /* A nice dark gray */
    margin-bottom:25px;
}
body.noScroll {
    overflow:hidden;
}
.header {
    margin:0px;
    padding:0px;
    background:#1BBC9B;
    text-align:center;
    padding:80px;
}
.header h1, .header h2 {
    margin:0px;
    padding:0px;
    line-height:1;
    color:white;
    text-shadow: 1px 1px 3px #019875;
}
.header h1 {
    display:inline-block;
    padding-bottom:10px;
    padding-left:15px;
    padding-right:15px;
    border-bottom:1px solid #019875;
}
.header h2 {
    margin-top:10px;
    font-size:20px;
}
.centered {
    text-align:center;
}
#startFilter {
    color:#333;
    border:4px solid #1BBC9B;
    font-weight:bold;
    text-decoration:none;
    display:inline-block;
    margin:25px;
    padding:15px;
    transition:0.2s ease-out;
}
#startFilter:hover {
    background:#1BBC9B;
    color:white;
}
#languageList {
    width:100%;
    margin:0px;
    padding:0px;
    list-style:none;
}
#languageList h3 {
    padding:20px;
    margin:0px;
    cursor:pointer;
    outline:none;
}
#languageList h3:nth-of-type(even), #languageList h3:nth-of-type(even) + div {
    background:#eee;
}
#languageList div {
    padding:15px;
}

.footer {
    color:#aaa;
    font-size:14px;
    background:white;
    padding:5px;
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
}
.footer a {
    color:#1BBC9B;
}

.filter {
    opacity:0;
    display:block;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    pointer-events:none;
    background:#1BBC9B;
    transition:opacity 0.3s ease-in;
    z-index:999;
    color:white;
}
.filter.open {
    opacity:1;
    pointer-events:auto;
}


.filter select {
    color:#333;
    border:4px solid #019875;
    font-weight:bold;
    text-decoration:none;
    display:inline-block;
    margin:25px;
   ...

JavaScript

var languages = [
    {
        name: 'Javascript',
        tags: ['web', 'front end'],
        description: 'A cool front-end language that does fun things to websites.'
    },
    {
        name: 'PHP',
        tags: ['web', 'back end'],
        description: 'Use it for breaking everything! :D'
    },
    {
        name: 'C++',
        tags: ['desktop'],
        description: 'I am not qualified to explain C++.'
    }
];

$.each(languages, function (index, value) {
    $("#languageList").append("<h3>" + value.name + "</h3><div>" + value.description + "</div>");
});

$("#languageList").accordion({
      collapsible: true
    });

$("#startFilter").click(function() {
    $(".filter").addClass("open");
    $("body").addClass("noScroll");
});