JSFiddle - React, Tailwind, and code Playground
HTML
<div class="counter-wrapper">
<div class="counter-inner clrfix">
<ul>
<li>
<span class="counter-image first"></span>
<span class="counter-number">4</span>
<span class="counter-text">CREATIVES</span>
</li>
<li>
<span class="counter-image second"></span>
<span class="counter-number">6</span>
<span class="counter-text">CODERS</span>
</li>
<li>
<span class="counter-image third"></span>
<span class="counter-number">4</span>
<span class="counter-text">DESIGNERS</span>
</li>
<li>
<span class="counter-image fourth"></span>
<span class="counter-number">2</span>
<span class="counter-text">WORKERS</span>
</li>
</ul>
</div>
CSS
* {
padding: 0px;
margin: 0px;
}
.counter-wrapper {
background: #fe6261;
padding-top: 37px;
padding-bottom: 36px;
border-top: 1px solid #fe4e4d;
border-bottom: 1px solid #fe4e4d;
}
.counter-inner ul{
list-style: none;
}
.counter-inner ul li {
float: left;
width: 14.84375%; /*190px;*/
}
.counter-image {
display: block;
width: 66px;
height: 70px;
border-right: 2px solid #fc6867;
float: left;
}
.counter-image.first {
background: url('../images/counter-1.png') 10px 15px no-repeat;
}
.counter-image.second {
background: url('../images/counter-2.png') 10px 15px no-repeat;
}
.counter-image.third {
background: url('../images/counter-3.png') 10px 15px no-repeat;
}
.counter-image.fourth {
background: url('../images/counter-4.png') 10px 15px no-repeat;
}
.counter-number {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #fd7e7e;
float: left;
padding: 12px 18px 0px;
}
.counter-text {
float: left;
font-size: 10px;
color: #fd7e7e;
padding: 4px 18px 0;
}