JSFiddle - React, Tailwind, and code Playground

by Wibawa Adhi Nugraha

HTML

<div class="page_ec_booklet">
<div class="submenu-wrap">
  <a href="#" class="submenu cara-login"></a>
  <a href="#" class="submenu info"></a>
  <a href="#" class="submenu estatment"></a>
  <a href="#" class="submenu inttrf"></a>
  <a href="#" class="submenu dmstrf"></a>
  <a href="#" class="submenu beli-reksa"></a>
  <a href="#" class="submenu jual-reksa"></a>
  <a href="#" class="submenu beli-voucher"></a>
  <a href="#" class="submenu billpayment"></a>
</div>
</div>

<div class="page_ec_booklet">
<div class="submenu-wrap">
  <a href="#" class="submenu cara-login-id"></a>
  <a href="#" class="submenu info-id"></a>
  <a href="#" class="submenu estatment-id"></a>
  <a href="#" class="submenu inttrf-id"></a>
  <a href="#" class="submenu dmstrf-id"></a>
  <a href="#" class="submenu beli-reksa-id"></a>
  <a href="#" class="submenu jual-reksa-id"></a>
  <a href="#" class="submenu beli-voucher-id"></a>
  <a href="#" class="submenu billpayment-id"></a>
</div>
</div>

CSS

.page_ec_booklet .submenu{
	background-image: url(../../images/icons/sprite-ec-booklet.png);
	background-repeat: no-repeat;
  width: 248px;
  height: 86px;
  margin: 5px;
  float: left;
}

.page_ec_booklet .submenu.cara-login{
	background-position: 0px 0px;
}

.page_ec_booklet .submenu.cara-login:hover{
	background-position: -248px 0px;
}

.page_ec_booklet .submenu.cara-login-id{
	background-position: -496px 0px;
}

.page_ec_booklet .submenu.cara-login-id:hover{
	background-position: -744px 0px;
}

.page_ec_booklet .submenu.info{
	background-position: 0px -86px;
}

.page_ec_booklet .submenu.info:hover{
	background-position: -248px -86px;
}

.page_ec_booklet .submenu.info-id{
	background-position: -496px -86px;
}

.page_ec_booklet .submenu.info-id:hover{
	background-position: -744px -86px;
}

.page_ec_booklet .submenu.estatment{
	background-position: 0px -172px;
}

.page_ec_booklet .submenu.estatment:hover{
	background-position: -248px -172px;
}

.page_ec_booklet .submenu.estatment-id{
	background-position: -496px -172px;
}

.page_ec_booklet .submenu.estatment-id:hover{
	background-position: -744px -172px;
}

.page_ec_booklet .submenu.inttrf{
	background-position: 0px -258px;
}

.page_ec_booklet .submenu.inttrf:hover{
	background-position: -248px -258px;
}

.page_ec_booklet .submenu.inttrf-id{
	background-position: -496px -258px;
}

.page_ec_booklet .submenu.inttrf-id:hover{
	background-position: -744px -258px;
}

.page_ec_booklet .submenu.dmstrf{
	background-position: 0px -344px;
}

.page_ec_booklet .submenu.dmstrf:hover{
	background-position: -248px -344px;
}

.page_ec_booklet .submenu.dmstrf-id{
	background-position: -496px -344px;
}

.page_ec_booklet .submenu.dmstrf-id:hover{
	background-position: -744px -344px;
}

.page_ec_booklet .submenu.beli-reksa{
	background-position: 0px -430px;
}

.page_ec_booklet .submenu.beli-reksa:hover{
	background-position: -248px -430px;
}

.page_ec_booklet .submenu.beli-reksa-id{
	background-position: -496px...