JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<link rel="stylesheet" href="http://v1.chrisvalleskey.com/lists2/css/screen.css">
<div class="container">
<ul class="list albums">
		<li>
			<span class="number">1</span>
			<span class="artwork">
				<a href="#"><img src="http://ib3-1.mcnemanager.com/scl/2/crp/11/sz/300/300/237558.cover" alt="" width="300" height="300" /></a>
			</span>
			<span class="actions">
				<a href="#" class="action add">Add</a>
				<a href="#" class="action dropdown">Options</a>
				<a href="#" class="action remove">Remove</a>
			</span>
			<a href="#" class="action play">Play</a>
			<span class="meta">
				<span class="name"><a href="#">Album Title</a></span>
				<span class="details">
					<span class="duration">3:30</span>
					<a href="#" class="artist-name">Artist Name</a>
				</span>
			</span>
		</li>
		<li class="active">
			<span class="number">2</span>
			<span class="artwork">
				<a href="#"><img src="http://ib3-1.mcnemanager.com/scl/2/crp/11/sz/300/300/298722.cover" alt="" width="300" height="300" /></a>
			</span>
			<span class="actions">
				<a href="#" class="action add">Add</a>
				<a href="#" class="action dropdown">Options</a>
			</span>
			<a href="#" class="action play playing">Play</a>
			<span class="meta">
				<span class="name"><a href="#">Album Title</a></span>
				<span class="details">
					<span class="duration">3:30</span>
					<a href="#" class="artist-name">Artist Name</a>
				</span>
			</span>
		</li>
		<li>
			<span class="number">3</span>
			<span class="artwork">
				<a href="#"><img src="http://ib3-1.mcnemanager.com/scl/2/crp/11/sz/300/300/1397532.cover" alt="" width="300" height="300" /></a>
			</span>
			<span class="actions">
				<a href="#" class="action add">Add</a>
				<a href="#" class="action dropdown">Options</a>
			</span>
			<a href="#" class="action play">Play</a>
			<span class="meta">
				<span class="name"><a href="#">Album Title</a></span>
				<span class="details">
					<span class="duration">3:30</span>
					<a href="#"...

SCSS

.container {
    width: 80%;
    max-width: 1400px;
    margin: 1em auto;
}

.list {
    width: 100%;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    li {
        width: 25%;
        float: left;
        dispaly: block;
        background: #EEE;
        text-align: center;
        padding: 1em;
        box-sizing: border-box;
    }
    li + li {
        border-left: 1px solid #DDD;
    }
    &.desktop {
        li {
            width: 25%;
        }
    }
    &.tablet {
        li {
            width: 33.3333%;
        }
    }
    &.mobile-big {
        li {
            width: 50%;
        }
    }
    &.mobile {
        li {
            width: 100%;
            float: none;
        }
    }
}

JavaScript

$(document).ready(function() {
    
    function setClasses() {
        var list = $('.list'),
        _w = list.width();
    
        $('.list').addClass("desktop");
        $('.list').removeClass("tablet");
        $('.list').removeClass("mobile-big");
        $('.list').removeClass("mobile");
        
        if(_w < 600) {
            $('.list').addClass("tablet");
        }
        if (_w < 400) {
            $('.list').addClass("mobile-big");
        }
        if (_w < 300) {
            $('.list').addClass("mobile");
        }
    }
    setClasses();
    
    $(window).resize(function(e) {
        setClasses();
    });
});