JSFiddle - React, Tailwind, and code Playground

by kadymov

HTML

<div class="card spades va"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades vq"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades vk"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades vj"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades vt"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades v9"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades v8"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades v7"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades v6"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades v5"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades v4"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades v3"><i class="value top"></i><i class="suit"></i></div>
<div class="card spades v2"><i class="value top"></i><i class="suit"></i></div>

<br/><br/>
<div class="card hearts va"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts vq"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts vk"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts vj"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts vt"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts v9"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts v8"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts v7"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts v6"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts v5"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts v4"><i class="value top"></i><i class="suit"></i></div>
<div class="card hearts v3"><i class="value top"></i><i...

CSS

body {
    font-family: Arial;
    background: #aaaaaa;
}

.card {
    width: 60px;
    height: 90px;
    background: #fff;
    border-radius: 4px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: inline-block;
    
    background: #ffffff;
    background: -moz-radial-gradient(center, ellipse cover,  #ffffff 0%, #eaeaea 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-radial-gradient(center, ellipse cover,  #ffffff 0%,#eaeaea 100%);
    background: -o-radial-gradient(center, ellipse cover,  #ffffff 0%,#eaeaea 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #ffffff 0%,#eaeaea 100%);
    background: radial-gradient(ellipse at center,  #ffffff 0%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 );
}

.suit {
    font-size: 40px;
    text-align: center;
    width: 100%;
    height: 30px;
    display: block;
    position: absolute;
    line-height: 85px;
    top: 0;
}

.spades,
.hearts {
    color: #d00;
}

.diamonds,
.clubs {
    color: #000;
}

.spades .suit:before,
.spades .value:after{
    content: '♠';    
}

.diamonds .suit:before,
.diamonds .value:after{
    content: '♦';    
}

.clubs .suit:before,
.clubs .value:after{
    content: '♣';    
}

.hearts .suit:before,
.hearts .value:after{
    content: '♥';    
}

.value {
    font-size: 14px;
    width: 20px;
    text-align: center;
    line-height: 14px;
}

.value:after {
    font-size: 16px;
    width: 20px;
    display: block;
}

.card .value {
    display: block;
    width: 20px;
}

.va .value:before {
    content: 'A';
}

.vq .value:before {
    content: '10';
}

.vk .value:before {
    content: 'K';
}

.vj .value:before {
    content: 'J';
}

.vt .value:before {
    content: '10';
}

.v9 .value:before {
    content: '9';
}

.v8 .value:before {
    content:...