JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="items">
     <div class="item">
      <div class="content">
        hello
       </div>
    </div>
    <div class="item">
      <div class="content">
        hello
       </div>
    </div>
    <div class="item">
      <div class="content">
        hello
       </div>
    </div>
     <div class="item active">
      <div class="content">
        hello
       </div>
    </div>
    <div class="item active">
      <div class="content">
        hello
       </div>
    </div>
    <div class="item active">
      <div class="content">
        friend
      </div>
    </div>
     <div class="item">
       <div class="content">
        hello
       </div>
    </div>
    <div class="item">
      <div class="content">
        hello
       </div>
    </div>
    <div class="item">
      <div class="content">
        hello
       </div>
    </div>
  </div>
</div>

CSS

.item {
  float: left;
  color: white;
}
.item .content {
  width: 60px;
  height: 60px;
  background: black;
  margin-right: 30px;
}
.item.active .content {
  background: green;
}