JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<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 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 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 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>

CSS

body{
    margin:0px;
    font-family:Verdana;
}

.container{
    margin:8px;
    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;
}

.content.a {
    border-color:#0B5096;
}

.content.b {
    border-color:#96510B;
}

.content.c {
    border-color:#960B1B;
}

.content.d {
    border-color:#2B6B0B;
}

.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;
}

.header.a {
    background:linear-gradient(#2B8DF0, #0F73D6);
    border-color:#0B5096;
}

.header.b {
    background:linear-gradient(#F08E2B, #D6720F);
    border-color:#96510B;
}

.header.c {
    background:linear-gradient(#F02B42, #D60F26);
    border-color:#960B1B;
}

.header.d {
    background:linear-gradient(#58BA27, #40A110);
    border-color:#2B6B0B;
}

.button {
    border:1px solid;
    border-radius:2px;
    line-height:24px;
    display:inline-block;
    height:24px;
    padding:0px 8px;
    text-decoration:none;
}
.a .button{
    background:linear-gradient(#2B8DF0, #0F73D6);
    border-color:#0B5096;
    box-shadow:inset 0px 1px #6CB0F5;
    color:#FFFFFF;
}
.a .button:hover{
    background:linear-gradient(#2D93FA, #1079E0);
    border-color:#0A4887;
    box-shadow:inset 0px 1px #70B7FF;
    color:#FFFFFF;
}
.b .button{
    background:linear-gradient(#F08E2B,...