JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="items">
    <div class="item"><span>1</span>text text <br/> text text </div>
    <div class="item"> <span>2</span> text text <br/> text text </div>
    <div class="item"> <span>3</span> text text  text </div>
    <div class="item"> <span>4</span> text text <br/> text text </div>
     <div class="item"> <span>5</span> text text <br/> text text </div>
    <div class="item"> <span>6</span>text text <br/> text text </div>
    <div class="item"><span>7</span>text text  text </div>
    <div class="item"><span>8</span>text text <br/> text text </div>
     <div class="item"><span>9</span>text text <br/> text text </div>
    <div class="item"><span>11</span>text text <br/> text text </div>
    <div class="item"><span>12</span>text text  text </div>
    <div class="item"><span>13</span>text text <br/> text text </div>
     <div class="item"><span>14</span>text text <br/> text text </div>
    <div class="item"><span>15</span>text text <br/> text text </div>
    <div class="item"><span>16</span>text text  text </div>
    <div class="item"><span>17</span>text text <br/> text text </div>
     <div class="item"><span>18</span>text text <br/> text text </div>
    <div class="item"><span>19</span>text text <br/> text text </div>
    <div class="item"><span>20</span>text text  text </div>
    <div class="item"><span>21</span>text text <br/> text text </div>
    
</div>

CSS

.items{
    position:relative;
}

.items .item{
    width:200px;
    border:1px solid #ddd;
    padding:20px;
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    position:relative;
    color:red;
}
.items .item span{
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    background-color:red;
    color:#fff;
    border-radius:50%;
    margin-right:10px;
    display:inline-block;
    
}