JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" class="container-fluid">
    <div class="row">
      <div class="col-xs-offset-2 top_menu_row1">
        <div class="col-xs-4 col-sm-4 top_menu_icon1 top-menu-icon-all">
          <div class="text_icon_name">Brands</div>
        </div>
        <div class="col-xs-4 col-sm-4 top_menu_icon2 top-menu-icon-all">
          <div class="text_icon_name">Education</div>
        </div>
        <div class="col-xs-4 col-sm-4 top_menu_icon3 top-menu-icon-all">
          <div class="text_icon_name">Categories</div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-offset-2 top_menu_row2">
        <div class="col-xs-4 col-sm-4 top_menu_icon4 top-menu-icon-all">
          <div class="text_icon_name">Books</div>
        </div>
        <div class="col-xs-4 col-sm-4 top_menu_icon5 top-menu-icon-all">
          <div class="text_icon_name">E-books</div>
        </div>
        <div class="col-xs-4 col-sm-4 top_menu_icon6 top-menu-icon-all">
          <div class="text_icon_name">Trending</div>
        </div>
      </div>
    </div>

CSS

.top_menu_icon1, .top_menu_icon2, .top_menu_icon3, .top_menu_icon4, .top_menu_icon5, .top_menu_icon6{
  background: url(../img/drawable-ldpi/sprites.png) no-repeat;
}

.top_menu {
  display: inline-block;
  position: relative;
}

.top-menu-icon-all {
  width: 36px;
  height: 36px;
  padding-bottom: 50px;
  padding-right: 65px;
  cursor: pointer;
  z-index: 100;
  position: relative;
}

.top_menu_icon1{
  background-position: -208px -56px ;	
}

.top_menu_icon2{
  background-position: -307px -56px ;
}

.top_menu_icon3{
  background-position: -407px -57px ;
}

.top_menu_icon4{
  background-position: -209px -107px ;
}

.top_menu_icon5{
  background-position: -308px -108px ;
}

.top_menu_icon6{
  background-position: -407px -108px ;
}