JSFiddle - React, Tailwind, and code Playground

by Rafa Ola

HTML

<div class="users-banner bg-blue">
    <div class="users-count">
    <span class='tenk-container'>
        <h2>Over 
        
            <span class='tenk' id=''> 1</span>
            <span class='tenk' id=''> 0</span>
            <span class='tenk' id=''> 0</span>,
            <span class='tenk' id=''> 0</span>
            <span class='tenk' id=''> 0</span>
            <span class='tenk' id=''> 0</span>
         students currently use FlashAcademy to grow their vocabulary, 
            strengthen their grammar and improve speaking fluency
        </h2>
        </span>
    </div>
</div>
<div class="curriculum">

CSS

h1,h2,h3,h4,h5 {
	font-family: 'proxima-bold', Verdana;
	}

.users-banner{
        display: flex;
        background: #00adf8;
    }        
    .users-count h2{
        text-align: center;
        color:#fff;
        width : 100%;
        padding: 2em 2em;
       
    }
    .tenk-container{
        display:inline;
        padding: 0;
        margin: 0;

       
    }
    .tenk{
        border-radius: 20px 20px;
        background-color: #fff;
        width:300px;
        height: 60px;
        margin: 3px;
        line-height: 60px;
        color: #2E3945;
        font-size: 1.5em;
        text-align: center;
        font-family: 'KG Second Chances Solid';
        padding: 5px 15px 5px 15px;
   
  }