JSFiddle - React, Tailwind, and code Playground
by Mystagogue
HTML
<div class="count-unit">
<div class="count-digit digit0"></div>
<div class="count-digit digit5"></div>
</div>
<div class="count-unit">
<div class="count-digit digit1"></div>
<div class="count-digit digit2"></div>
</div>
<div class="count-unit">
<div class="count-digit digit5"></div>
<div class="count-digit digit0"></div>
</div>
<div class="count-unit">
<div class="count-digit digit0"></div>
<div class="count-digit digit6"></div>
</div>
</div>
CSS
.count-unit
{
margin: 0 11px 0 11px; /*padding: 0 20px 0 20px;*/
float: left;
}
.count-digit
{
background-image: url("Images/numbers.png");
background-color: transparent;
background-repeat: no-repeat;
float: left;
}
.digit0
{
height: 44px;
width: 30px;
background-position: -0px -0px;
background-color: Red;
}
.digit1
{
height: 44px;
width: 30px;
background-position: -30px -0px;
background-color: Green;
}
.digit2
{
height: 44px;
width: 30px;
background-position: -60px -0px;
background-color: blue;
background-color: Purple;
}
.digit3
{
height: 44px;
width: 30px;
background-position: -90px -0px;
background-color: Black;
}
.digit4
{
height: 44px;
width: 30px;
background-position: -120px -0px;
background-color: Green;
}
.digit5
{
height: 44px;
width: 30px;
background-position: -150px -0px;
background-color: Orange;
}
.digit6
{
height: 44px;
width: 30px;
background-position: -180px -0px;
background-color: Yellow;
}
.digit7
{
height: 44px;
width: 30px;
background-position: -210px -0px;
background-color: Cyan;
}
.digit8
{
height: 44px;
width: 30px;
background-position: -240px -0px;
background-color: Purple;
}
.digit9
{
height: 44px;
width: 30px;
background-position: -270px -0px;
}