JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div class="card-base card-red">
    <div class="card-name">Card Name</div>
    <div class="card-art"></div>
    <div class="card-type">Card Type</div>
    <div class="card-description">
        Lorem Ipsum ...
    </div>
    <div class="card-stats">3 / 3</div>
</div>

CSS

* {
    box-sizing: border-box;
}

.card-base {
    border: 4px solid #000;
    border-radius: 4px;
    display: inline-block;
    padding: 12px;
    width: 384px;
}

.card-base.card-red {
    background: url(http://th05.deviantart.net/fs49/PRE/f/2009/203/7/6/Red_Stone_Texture_by_dsibley.jpg);
    background-size: 384px auto;
}

.card-base > .card-name {
    border: 3px solid;
    border-radius: 3px;
    padding: 6px;
    font-weight: 600;
}

.card-base.card-red > .card-name {
    border-color: #D94C4C;
    background-color: #E6ACAC;
}

.card-base > .card-art {
    height: 192px;
    border: 3px solid;
    border-top: 0px;
    border-bottom: 0px;
    background-color: #FFF;
    margin: 0px 8px;
}

.card-base.card-red > .card-art {
    border-color: #D94C4C;
}

.card-base > .card-type {
    border: 3px solid;
    border-radius: 3px;
    padding: 6px;
    font-weight: 600;
}

.card-base.card-red > .card-type {
    border-color: #D94C4C;
    background-color: #E6ACAC;
}

.card-base > .card-description {
    height: 192px;
    border: 3px solid;
    border-top: 0px;
    margin: 0px 8px;
    padding: 8px;
    border-radius: 0px 0px 3px 3px;
}

.card-base.card-red > .card-description {
    border-color: #D94C4C;
    background-color: #F2DADA;
}

.card-base > .card-stats {
    border: 3px solid;
    border-radius: 3px;
    padding: 6px;
    float: right;
    position: relative;
    top: -28px;
    font-weight: 600;
    margin-bottom: -28px;
}

.card-base.card-red > .card-stats {
    border-color: #D94C4C;
    background-color: #E6ACAC;
}