JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/metro-bootstrap/3.1.1.2/css/metro-bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/metro-bootstrap/3.1.1.2/css/metro-bootstrap.css">
<script src="https://cdn.jsdelivr.net/metro-bootstrap/3.1.1.2/css/metro-bootstrap.css.map"></script>
<div class="well well-sm">
    <h2><font color="green">Features:</font></h2>
    <div class="grid">
      <div class="row col-md-12">
        <div class="tile tile-custom tile-turquoise col-xs-6 col-md-2">
            <div class="checkbox col-md-5">
              <p><h4>hfgh</h4></p>
            <a href="#" class="fa-links">
                <h1> Opt 1 </h1>
                <i class="fa fa-4x fa-signal"> </i> 
                <h4> test profiles</h4>
            </a>
            </div>
        </div>
        <div class="tile tile-custom tile-purple col-xs-6 col-md-2">
            <a href="#">
                <h1> Opt 2</h1>
            </a>                
        </div>
        <div class="tile tile-custom tile-red col-xs-6 col-md-2">
            <a href="#">
                <h1> Opt 3</h1>
            </a>                
        </div>
      </div>
     </div>
    </div>

CSS

.tile:not(.activeTile):hover{background-color: #0047AB;}