JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="wrapper">
    <div class="filter">
        <span class="text">Filter Classes:</span> <select><option></option></select>
    </div>
    <div class="list"></div>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 180%;
    color: #444;
}
.wrapper {
    padding: 20px;
    margin: 20px;
    border: 1px solid #ececec;
}

.filter {
    font-size: 14px;
    line-height: 100%;
    padding: 0 0 15px 0;
}

.textbook {
    border-top: 1px solid #ececec;
    padding: 15px 0;
}

.textbook img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
    border: 1px solid #ececec;
    padding: 3px;
}

JavaScript

// Closure
(function( window ) {
    
    // Data
    var textbookData = [
        { 
            textbookId: 1,
            classIds: ['CHEM110','CHEM120'],
            textbookName: 'Intro to Organic Chemistry',
            publishDate: '2012-04-21T12:25:43-05-00',
            author: 'C.H.Oh',
            imageUrl: 'http://covers.booktopia.com.au/big/9781118321768/introduction-to-organic-chemistry.jpg'
        },
        {
            textbookId: 2,
            classIds: ['CHEM120','CHEM230'],
            textbookName: 'Advanced Organic Chemistry',
            publishDate: '2013-05-21T18:25:43-05-00',
            author: 'M. Ethyl Benzoate',
            imageUrl: 'http://books.pakchem.net/uploads/1/2/7/7/12772060/7627009_orig.jpg?166'
        }
    ];
    
    // Setup
    var classList = [];
    var selectElement = document.querySelector( '.filter select' );
    var listElement = document.querySelector( '.list' ); 
    
    // Loop through our textbooks
    textbookData.forEach( function ( textbook ) {    
        
        // Create textbook element
        var element = document.createElement( 'div' );
        element.innerHTML += '<img src="' + textbook.imageUrl + '">';
        element.innerHTML += '<h3>' + textbook.textbookName + '</h3>';
        element.innerHTML += '<p class="date">' + textbook.publishDate + '</p>';
        element.innerHTML += '<p class="author">' + textbook.author + '</p>';
        
        // Create a string of styles from the textbook's array of class ids
        element.className = 'textbook ' + textbook.classIds.join( ' ' );
        
        // Appened texbook element to our list element
        listElement.appendChild( element );
        
        // Loop through the textbooks
        textbook.classIds.forEach( function( classId ) {
            
            // Check if class was already added
            if ( classList.indexOf( classId ) == -1 ) {
                
                // Add class
                classList.push( classId...