JSFiddle - React, Tailwind, and code Playground

by raad

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div id="container">
    <div class="toolbar hidden" data-offset-top="5" data-spy="affix.off">
        <button class="btn btn-primary btn-sm toolbar-btn" type="button" id="tb-list-grid" title="click for card listing"><span class="glyphicon glyphicon-th"></span>
        </button>
        <button class="btn btn-primary btn-sm toolbar-btn" type="button" id="tb-list-table" title="click for table listing"><span class="glyphicon glyphicon-th-list"></span>
        </button>
    </div>
     <h3>Items</h3>
    <ul id="theList" class="theListCards center tableList">
        <li id="listHeader" data-offset-top="41" data-spy="affix" class="thead affix-top">
            <div class="left">
                <div class="hidden-xs" width="20%">Item</div>
                <div class="visible-xs">Item /
                    <div>Group</div>
                </div>
            </div>
            <div class="left hidden-xs" width="20%">Group</div>
            <div class="hidden"></div>
            <div class="hidden"></div>
            <div class="hidden"></div>
            <div>
                <div class="hidden-xs" width="20%">Level</div>
                <div class="visible-xs">Level /
                    <div>Type</div>
                </div>
            </div>
            <div class="hidden-xs" width="20%">Type</div>
            <div width="20%">Avg. Score</div>
        </li>
        <li data-popsign="" class="card tr" id="li-248">
            <div class="cardProp cardItem">Item 1<span class="cardGroup visible-xs">Group1</span>
            </div>
            <div class="cardProp cardGroup hidden-xs"><span>Group:&nbsp;</span>Group1</div>
            <div class="cardImage cardIcon">
                <img width="60" alt="icon for item" src="http://dummyimage.com/60/000/fff&text=Icon" />
            </div>
   ...

CSS

body {
    background-color: #200E0C;
}
#container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
.toolbar {
    padding: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.25);
}
h3 {
    color: #ffc;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 5px;
    margin-top: 10px;
}
.card {
    color: #fff;
    display: inline-block;
    margin: 4px 4px 10px;
    padding-top: 5px;
    text-align: center;
    white-space: nowrap;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.15);
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.25);
    width: 150px;
    min-width: 150px;
    font-size: 11px;
}
.cardProp {
    display: block;
    color: #fff;
     width: 20%;
}
.cardProp > span {
    color: #ccc;
}
.cardItem {
    padding: 1px;
    font-weight: bold;
}
li.card > div.cardProp > span.visible-xs {
    display: block !important;
}
.cardScore {
    background-color: rgba(255, 255, 255, 0.15);
    color: #FF8C00;
    font-weight: bold;
    text-shadow: 0 0 2px #000;
    line-height: 2em;
}
.cardImage {
    background-color: #fff;
    display: table-cell;
    height: 109px;
    width: 75px;
    vertical-align: middle;
    padding: 2px;
}
.cardImage > img {
    color: #888;
}
.cardPicture {
    font-size: 13px;
    white-space: normal;
}
#theList.tableList {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding-left: 0;
    border-collapse: collapse;
}
#theList, .tableList > li.card {
    padding-left: 0;
}
/* hide table header row by default */
 li.thead {
    display: none;
}
.tableList > li > div.cardImage {
    display: none !important;
}
.tableList > li.thead > div {
    display: table-cell;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
    font-weight: bold;
    width: 20%;
    padding: 5px;
}
.tableList .thead {
    display: table-header-group;
}
.tableList > li.tr {
    display: table-row;
    font-size: 14px;
    box-shadow:...

JavaScript

// toolbar button handlers
$('#tb-list-grid').click(function () {
    $('#theList').removeClass('tableList');
    $('#listHeader').addClass('hidden');
});

$('#tb-list-table').click(function () {
    $('#theList').addClass('tableList');
    $('#listHeader').removeClass('hidden');
});

var $affixed = $("#listHeader");

// To account for the affixed submenu being pulled out of the content flow.
var $placeholder = $affixed.clone().addClass("affix-placeholder");
$affixed.after($placeholder);

$affixed.affix({
    offset: {
        top: 40
    }
})