JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div class="grid grid-pad">
    <div class="col-1-3">
        <div class="container a">
            <div class="header">Swatch A</div>
            <div class="content">
                <a href="#" class="button">default a</a>
                <a href="#" class="button c">button c</a>
            </div>
        </div>
    </div>
    <div class="col-2-3">
        <div class="container b">
            <div class="header">Swatch B</div>
            <div class="content">
                <a href="#" class="button a">button a</a>
                <a href="#" class="button">default b</a>
            </div>
        </div>
    </div>
</div>
<div class="grid grid-pad">
    <div class="col-1-3">
        <div class="container d">
            <div class="header">Swatch D</div>
            <div class="content">
                <a href="#" class="button a">button a</a>
                <a href="#" class="button">default d</a>
            </div>
        </div>
    </div>
    <div class="col-1-3">
        <div class="container c">
            <div class="header">Swatch C</div>
            <div class="content">
                <a href="#" class="button a">button a</a>
                <a href="#" class="button">default c</a>
            </div>
        </div>
    </div>
    <div class="col-1-3">
        <div class="container d">
            <div class="header">Swatch D</div>
            <div class="content">
                <a href="#" class="button a">button a</a>
                <a href="#" class="button">default d</a>
            </div>
        </div>
    </div>
</div>
<div class="grid grid-pad">
    <div class="col-1-2">
        <div class="container a">
            <div class="header">Swatch a</div>
            <div class="content">
                <a href="#" class="button">button</a>
                <a href="#" class="button c">default</a>
            </div>
        </div>
    </div>
    <div class="col-1-8">
        <div class="container b">
            <div...

CSS

body {
    margin:0px;
    font-family:Verdana;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
[class*='col-'] {
    float: left;
    padding-right: 20px;
}
[class*='col-']:last-of-type {
    padding-right: 0;
}
.col-2-3 {
    width: 66.66%;
}
.col-1-3 {
    width: 33.33%;
}
.col-1-6 {
    width: 16.66%;
}
.col-1-2 {
    width: 50%;
}
.col-1-4 {
    width: 25%;
}
.col-1-8 {
    width: 12.5%;
}
.grid:after {
    content:"";
    display: table;
    clear: both;
}
.grid-pad:first-of-type {
    padding: 20px 0 20px 20px;
}
.grid-pad {
    padding: 0px 0 20px 20px;
}
.grid-pad >[class*='col-']:last-of-type {
    padding-right: 20px;
}
body {
    margin:0px;
    font-family:Verdana;
}
.container {
    box-shadow:2px 2px 3px rgba(0, 0, 0, 0.3);
    border-radius:4px;
}
.content {
    border-radius:0px 0px 4px 4px;
    border:1px solid;
    border-top:0px;
    padding:8px;
}
.a .content {
    border-color:#0B5096;
}
.b .content {
    border-color:#96510B;
}
.c .content {
    border-color:#960B1B;
}
.d .content {
    border-color:#2B6B0B;
}
.e .content {
    border-color:#000000;
}
.content.a {
    border-color:#0B5096;
}
.content.b {
    border-color:#96510B;
}
.content.c {
    border-color:#960B1B;
}
.content.d {
    border-color:#2B6B0B;
}
.content.e {
    border-color:#000000;
}
.header {
    height:24px;
    border-radius:4px 4px 0px 0px;
    border:1px solid;
    line-height:24px;
    color:#FFFFFF;
    padding:0px 8px;
}
.a .header {
    background:linear-gradient(#2B8DF0, #0F73D6);
    border-color:#0B5096;
}
.b .header {
    background:linear-gradient(#F08E2B, #D6720F);
    border-color:#96510B;
}
.c .header {
    background:linear-gradient(#F02B42, #D60F26);
    border-color:#960B1B;
}
.d .header {
    background:linear-gradient(#58BA27, #40A110);
    border-color:#2B6B0B;
}
.e .header {
    background:linear-gradient(#4F4F4F, #363636);
    border-color:#000000;
}
.header.a {
   ...