JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/nswilhelm/jquery-map-trifecta/master/js/jquery.map-trifecta.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/nswilhelm/jquery-map-trifecta/master/css/map-trifecta.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<body>
<!--MAIN CONTAINER -->
<div class="container" id="main">
<div class="row">
<!--IMAGE MAP-->
<div class="col-lg-5 col-lg-push-7">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Shapes Image</h4>
</div>
<div class="panel-body">
<center>
<img id="myImageMap" src="https://raw.githubusercontent.com/nswilhelm/jquery-map-trifecta/master/images/shapes.png" usemap="#shapesMap">
<map name="shapesMap">
<area data-mapid="1" coords="5,136,80,9,152,135" alt="Triangle" href="#" shape="poly" />
<area data-mapid="2" coords="177,134,179,7,307,8,308,134" alt="Square" href="#" shape="poly" />
<area data-mapid="3" coords="358,123,353,119,342,104,334,88,333,67,339,46,352,26,379,10,403,7,420,13,438,22,448,33,454,43,459,61,462,77,459,93,449,112,437,122,426,128,414,134,393,135,376,132" alt="Circle" href="#" shape="poly" />
</map>
</center>
</div>
</div>
</div>
<!--TABLE ROWS-->
<div class="col-lg-7 col-lg-pull-5">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Shapes Table</h4>
</div>
<div class="panel-body">
<table id="myTable" class="table table-hover">
...
JavaScript
<!--For Responsive, Hilight, Zoom for Image Map & Table -->
$("img[usemap]").mapTrifecta();