JSFiddle - React, Tailwind, and code Playground

HTML

<p class="results">&nbsp;</p>
<div class="cell-wrap cell1">
  <table class="content">
    <tbody>
      <tr>
        <td>Could not find open wifi</td>
      </tr>
    </tbody>
  </table>
  <div class="cell">
    <div class="image left top">
      <a href="#linkA" class="linkA">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
    <div class="image right top">
      <a href="#linkB" class="linkB">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
    <div class="image left bottom">
      <a href="#linkC" class="linkC">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
  </div>
</div>
<div class="cell-wrap cell2">
  <table class="content">
    <tbody>
      <tr>
        <td>There's a problem with your wifi connection!</td>
      </tr>
    </tbody>
  </table>
  <div class="cell">
    <div class="image left top">
      <a href="#linkA" class="linkA">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
    <div class="image right top">
      <a href="#linkB" class="linkB">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
    <div class="image left bottom">
      <a href="#linkC" class="linkC">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
    <div class="image right center">
      <a href="#linkD" class="linkD">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
    <div class="image right bottom">
      <a href="#linkE" class="linkE">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
  </div>
</div>
<div class="cell-wrap cell3">
  <table class="content">
    <tbody>
      <tr>
        <td>3G connection applied</td>
      </tr>
    </tbody>
  </table>
  <div class="cell">
    <div class="image left top">
      <a href="#linkA" class="linkA">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
    <div class="image right top">
      <a href="#linkB" class="linkB">
        <img src="http://goo.gl/wNDMe">
      </a>
    </div>
    <div class="image left bottom">
 ...

CSS

table {
    border-collapse:collapse;
}
td, .img, .cell-wrap {
    text-align:center;
    vertical-align:middle;
}
img {
    border:0
}
.cell-wrap {
    position:relative;
    margin-right:10px;
    float:left;
    background:url(http://goo.gl/PoJGk) no-repeat;
}
.content {
    color:#e60;
}
.cell-wrap,.cell-wrap td{
    height:150px;
    width:150px;
}
.image{
    position:absolute;
    width:50px;
    height:50px;
}
.image a {
    outline:none;
}
.cell {
    display:none;
}
/* Change sprite display portion */
.cell1{
    background-position: 0 0;
}
.cell2{
    background-position:0 -150px;
}
.cell3{
    background-position:0 -300px;
}
.cell4{
    background-position:0 -450px;
}
/* Show images container */
.cell-wrap:hover .cell {
    display:inline;
}
/* controlled positioning for images */
.center{
    left:50px;right:50px;top:50px;bottom;50px;
}
.left{
    left:0;right:auto;
}
.right{
    left:auto;right:0;
}
.top{
    top:0;bottom:auto;
}
.bottom{
    top:auto;bottom:0;
}

JavaScript

$(function() {
    $(".cell a").click(function(e) {
        //filter 
        if ($(this).attr("class").match(/link(.)(\\s[\\b]*)?/)) {
            e.preventDefault();
            var param = $(this).attr("class").replace(/(.*\s)*link(.).*$/, "$2");
            doThings(param);
        }
    });
});

function doThings(param) {
    var results = $("<span>").css("display", "none").html("Specific <b>" + param + "</b> results");
    $(".results").prepend(results.prepend("&nbsp;"));
    switch (param) {
    case 'A':
        //call specific 'A' functions here...
        results.css("color", "#c55").fadeIn();
        break;
    case 'B':
        results.css("color", "#5c5").css("text-decoration", "line-through").fadeTo('slow', 0.5);
        break;
    case 'C':
        results.css("color", "#55c").css("font-size", "8px").show().animate({
            fontSize: '15px'
        }, 1000);
        break;
    default:
        results.css("color", "#666").show();
    }
}