JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer" class="container-fluid">
		<!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
      <div class="container">
			<div class="col-xs-2 col-sm-2 bottom_menu_icon1 bottom-menu-icon-all">
				<div class="text_bottom_icon1">Feed</div>
			</div>
			<div class="col-xs-2 col-sm-2 bottom_menu_icon2 bottom-menu-icon-all">
				<div class="text_bottom_icon2">My things</div>
			</div>
			<div class="col-xs-2 col-sm-2 bottom_menu_icon3 bottom-menu-icon-all">
				<div class="text_bottom_icon3">Heroes</div>
			</div>
			<div class="col-xs-2 col-sm-2 bottom_menu_icon4 bottom-menu-icon-all">
				<div class="text_bottom_icon4">Books</div>
			</div>
			<div class="col-xs-2 col-sm-2 bottom_menu_icon5">
				<div class="text_bottom_icon5">Cartoons</div>
			</div>
      </div>
    </div>
	</div>

CSS

.bottom_menu_icon9, .bottom_menu_icon10, .bottom_menu_icon1, .bottom_menu_icon2, .bottom_menu_icon3, .bottom_menu_icon4, .bottom_menu_icon5, .bottom_menu_icon6, .bottom_menu_icon7, .bottom_menu_icon8{
	background: url(../img/drawable-mdpi/sprites_menu_down.png) no-repeat;
}

.bottom_menu_icon4:hover{
	background-position: -410px -60px ;
	width: 32px;
	height: 32px;
}

.bottom_menu_icon5:hover{
	background-position: -510px -59px ;
	width: 32px;
	height: 32px;
}

.bottom_menu_icon1{
	background-position: -108px -9px ;
	width: 32px;
	height: 32px;
	margin-right: 35px;
	margin-left: 15px;
	margin-top: 5px;
	margin-left: -1px;
}

.bottom_menu_icon2{
	background-position: -207px -8px ;
	width: 32px;
	height: 32px;
	margin-right: 35px;
	margin-top: 5px;
}

.bottom_menu_icon3{
	background-position: -309px -9px ;
	width: 32px;
	height: 32px;
	margin-right: 35px;
	margin-top: 5px;
}

.bottom_menu_icon4{
	background-position: -409px -9px ;
	width: 32px;
	height: 32px;
	margin-right: 35px;
	margin-top: 5px;
}

.bottom_menu_icon5{
	background-position: -509px -7px ;
	width: 32px;
	height: 32px;
	margin-top: 5px;
}

.bottom_menu_icon1:hover{
	background-position: -108px -58px ;
	width: 32px;
	height: 32px;
}

.bottom_menu_icon2:hover{
	background-position: -208px -58px ;
	width: 32px;
	height: 32px;
}

.bottom_menu_icon3:hover{
	background-position: -308px -58px ;
	width: 32px;

}
.text_bottom_icon1{
	color: #6270ef;
	font-size: 12px;
	white-space: nowrap;
	margin-top: 35px;
	margin-left: -15px;
}
.text_bottom_icon2{
	color: #6270ef;
	font-size: 12px;
	white-space: nowrap;
	margin-top: 35px;
	margin-left: -25px;
}
.text_bottom_icon3{
	color: #6270ef;
	font-size: 12px;
	white-space: nowrap;
	margin-top: 35px;
	margin-left: -20px;
}
.text_bottom_icon4{
	color: #6270ef;
	font-size: 12px;
	white-space: nowrap;
	margin-top: 35px;
	margin-left: -15px;
}
.text_bottom_icon5{
	color: #6270ef;
	font-size: 12px;
	white-space: nowrap;
	margin-top: 35px;
	margin-left: -25px;
}