JSFiddle - React, Tailwind, and code Playground

by abennington

HTML

<link rel="stylesheet" href="http://www.lexmundi.com/images/lexmundi/template/CentralAmericaMap/jquery-jvectormap-2.0.0.css">
<script src="http://www.lexmundi.com/images/lexmundi/template/CentralAmericaMap/jquery-jvectormap-2.0.0.min.js"></script>
<script src="http://www.namb.org/images/namb/template/2012/js//mylibs/jvectormap/jquery-jvectormap-us-en.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="contacts-map"></div>
<!-- Location modal content Begin -->
<div class="modal-Texas hide">
    <div class="modal-conent">This is content for <b>Texas 1</b>

    </div>
</div>
<div class="modal-Texas hide">
    <div class="modal-conent">This is content for <b>Texas 2</b>

    </div>
</div>
<div class="modal-Texas hide">
    <div class="modal-conent">This is content for <b>Texas 2</b>

    </div>
</div>
<div class="modal-Texas hide">
    <div class="modal-conent">This is content for <b>Texas 2</b>

    </div>
</div>
<div class="modal-Texas hide">
    <div class="modal-conent">This is content for <b>Texas 2</b>

    </div>
</div>
<div class="modal-Texas hide">
    <div class="modal-conent">This is content for <b>Texas 2</b>

    </div>
</div>
<div class="modal-California hide">
    <div class="modal-conent">This is content for <b>California</b>

    </div>
</div>
<div class="modal-New Mexico hide">
    <div class="modal-conent">This is content for <b>New Mexico</b>

    </div>
</div>
<div class="modal-New Mexico hide">
    <div class="modal-conent">This is content for <b>New Mexico</b>

    </div>
</div>
<div class="modal-New York hide">
    <div class="modal-conent">This is content for <b>New York</b>

    </div>
</div>
<!-- Location content End -->

JavaScript

$(document).ready(function () {
    $('#contacts-map').css({
        width: '100%',
        height: '450px',
        padding: '15px'
    });

    var customModal = $('<div class="modal fade bs-modal-sm col-sm-12 col-xs-12 modal2" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="modal"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel"></h4></div><div class="modal-body"></div></div></div></div>');

    var RColor = '#007cc4';   
    var stateHTML = {
        "US-VA": {"location": "Virginia"},
		"US-PA": {"location": "Pennsylvania"},
		"US-TN": {"location": "Tennessee"},
		"US-WV": {"location": "West Virginia"},
		"US-NV": {"location": "Nevada"},
		//"US-TX": {"location": "Texas"},
		"US-NH": {"location": "New Hampshire"},
		"US-NY": {"location": "New York"},
		"US-HI": {"location": "Hawaii"},
		"US-VT": {"location": "Vermont"},
		"US-NM": {"location": "New Mexico"},
		"US-NC": {"location": "North Carolina"},
		"US-ND": {"location": "North Dakota"},
		"US-NE": {"location": "Nebraska"},
		"US-LA": {"location": "Louisiana"},
		"US-SD": {"location": "South Dakota"},
		"US-DC": {"location": "District of Columbia"},
		"US-DE": {"location": "Delaware"},
		"US-FL": {"location": "Florida"},
		"US-CT": {"location": "Connecticut"},
		//"US-WA": {"location": "Washington"},
		"US-KS": {"location": "Kansas"},
		"US-WI": {"location": "Wisconsin"},
		"US-OR": {"location": "Oregon"},
		//"US-KY": {"location": "Kentucky"},
		"US-ME": {"location": "Maine"},
		"US-OH": {"location": "Ohio"},
		"US-OK": {"location": "Oklahoma"},
		"US-ID": {"location": "Idaho"},
		"US-WY": {"location": "Wyoming"},
		"US-UT": {"location": "Utah"},
		"US-IN": {"location": "Indiana"},
		"US-IL": {"location": "Illinois"},
		//"US-AK": {"location": "Alaska"},
		"US-NJ": {"location": "New...