JSFiddle - React, Tailwind, and code Playground

by Travis

HTML

<header id="header">
    <div id="header-content">
        <h1 class="title">Exploring Pixel Art</div>
</header>

<main id="core">
    <p class="lead">This is a log of my studies as I learn more about creating pixel art. Each week, I will assign myself a new challenge to complete using a specific focus. At the end of each week I will update this page with my progress.</p>
    
    <div class="study-block">
        <h3>Study One: Black &amp; White</h3>
        <p>For this initial challenge, I wanted to focus specifically on lines and shapes. By limiting my color palette to black &amp; white I can focus on the basics how to handle curves and bends.</p>
        <ul class="image-set">
            <li><img src="http://fillmurray.com/128/128" alt=""></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    
    <div class="study-block">
        <h3>Study Two: Limited Colour Palette</h3>
        <p>For this challenge, I wanted to take my initial experience with simply using lines and shapes and add in a very limited colour palette to push myself to get the most out of what limited colors I allow myself.</p>
        <ul class="image-set">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</main>

CSS

@import 'https://fonts.googleapis.com/css?family=IM+Fell+English|Open+Sans';

/********/
/* BASE */
/********/

body {
    font:300 16px 'Open Sans', sans-serif;
    background:#fcfcfc;
}

h1, h2, h3 {font-family:'IM Fell English', serif; margin:0;}
h1 {font-size:4em;}
h2 {font-size:2em;}
h3 {font-size:1.5em; padding:0 0 .5em 0;position:relative;}
h3:after {
    content:'';
    width:6em;
    height:4px;
    background:#000;
    position:absolute;
    bottom:-4px;
    left:0;
}



/**********/
/* LAYOUT */
/**********/

/* Header */
#header {}
#header-content {width:90%; max-width:1000px; margin:4em auto 0;}

/* Core */
#core {width:90%; max-width:1000px; margin:0 auto;}


/***********/
/* MODULES */
/***********/

/* Lead */
.lead {
    font-size:1.75em;
    font-family:'IM Fell English', serif;
    line-height:1.5;
}

/* Image Set */
.image-set {list-style:none; margin:0; padding:0;}
.image-set > li {
    width:128px;
    height:128px;
    margin:0 1em 1em 0;
    background:#f0f0f0;
    display:inline-block;
}
.image-set img {display:block;}

/* Study Block */
.study-block {margin:3em 0 0 0;}
.study-block:first-child {margin:0;}