JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<div class="bq_fl">


  <div class="col-md-3 col-sm-6 col-xs-6 block-sm-holder">

    <a ng-href class="block-sm">


      <span class="link-name">Jewelry<br>
                                    <span>View Booths</span>
      </span>

    </a>

  </div>

  <div class="col-md-3 col-sm-6 col-xs-6 block-sm-holder">

    <a ng-href class="block-sm">


      <span class="link-name">Dental<br>
                                    <span>View Booths</span>
      </span>

    </a>

  </div>

  <div class="col-md-3 col-sm-6 col-xs-6 block-sm-holder">

    <a ng-href class="block-sm">


      <span class="link-name">Brushes<br>
                                    <span>View Booths</span>
      </span>

    </a>

  </div>

  <div class="col-md-3 col-sm-6 col-xs-6 block-sm-holder">

    <a ng-href class="block-sm">


      <span class="link-name">Child<br>
                                    <span>View Booths</span>
      </span>

    </a>

  </div>

  <div class="col-md-3 col-sm-6 col-xs-6 block-sm-holder">

    <a ng-href class="block-sm">


      <span class="link-name">Teen<br>
                                    <span>View Booths</span>
      </span>

    </a>

  </div>

  <div class="col-md-3 col-sm-6 col-xs-6 block-sm-holder">

    <a ng-click="#" class="block-sm">


      <span class="link-name">Adult<br>
                                    <span>View Booths</span>
      </span>

    </a>

  </div>

  <div class="col-md-3 col-sm-6 col-xs-6 block-sm-holder">

    <a ng-href class="block-sm">


      <span class="link-name">Novelty<br>
                                    <span>View Booths</span>
      </span>

    </a>

  </div>

  <div class="col-md-3 col-sm-6 col-xs-6 block-sm-holder">

    <a ng-href class="block-sm">


      <span class="link-name">Gift Ideas<br>
                                    <span>View Booths</span>
      </span>

    </a>

 ...

CSS

.bq_fl {
  margin-top: 3px;
  padding-top: 2px;
}

.block-sm {
  display: block;
  width: 100%;
  height: 90px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  border: 1px solid #c4c4c4;
  background: #fff;
  border-radius: 3px;
  padding: 0 5px;
  margin: 10px auto;
  text-align: center;
  font-size: 16px;
  text-decoration: none;
  font-weight: 700;
  color: #333;
  line-height: 82px;
  transition: .3s;
  overflow: hidden;
}

.block-sm .link-name {
  display: inline;
  display: inline-table;
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
}

.block-sm .link-name span {
  font-weight: 300;
}

.block-sm a {
  color: #333;
}

.block-sm-holder:nth-child(5n+1) .block-sm {
  border-bottom: 3px solid #00b7ed;
}

.block-sm-holder:nth-child(5n+2) .block-sm {
  border-bottom: 3px solid #803591;
}

.block-sm-holder:nth-child(5n+3) .block-sm {
  border-bottom: 3px solid #f52422;
}

.block-sm-holder:nth-child(5n+4) .block-sm {
  border-bottom: 3px solid #ffae1d;
}

.block-sm-holder:nth-child(5n+5) .block-sm {
  border-bottom: 3px solid #85c243;
}

.block-sm:hover {
  text-decoration: none;
  color: #3f67ca;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.fadein,
.fadeout {
  -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s;
  -moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s;
  -o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s;
  transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s;
}