JSFiddle - React, Tailwind, and code Playground

by keith

HTML

<script src="http://davidlynch.org/js/maphilight/jquery.maphilight.js"></script>
  <div id="model-diagram1" class="model-diagram">
    <div class="model-header">
      <h3 class="head">Interactive Venn Diagram</h3>
    </div>
    <div class="model-content-wrapper">
      <div class="section">

        <ul class="tab-content" id="map-information">
          <li id="map1-info">
            <h2 class="head">Map1 Information</h2>
            <p>Synergistically embrace interactive catalysts for change without high-quality web-readiness.</p>
            <h3>Learned Skills</h3>
            <ul>
              <li>Seamlessly enable multimedia based technologies vis-a-vis client-centered platforms.</li>
              <li>Quickly fashion orthogonal methodologies vis-a-vis long-term high-impact bandwidth.</li>
            </ul>              
          </li>
          <li id="map2-info">
            <h2 class="head">Map2 Information</h2>
            <p>A combination of the innate characteristics and learned skills that an employee uses to cary out his/her day-to-day work.</p>
            <h3>Innate Characteristics</h3>
            <ul>
              <li>Seamlessly enable multimedia based technologies vis-a-vis client-centered platforms.</li>
              <li>Quickly fashion orthogonal methodologies vis-a-vis long-term high-impact bandwidth.</li>
            </ul>
          </li>
          <li id="map3-info">
            <h2 class="head">Map3 Information</h2>
            <h3>Learned Skills</h3>
            <ul>
              <li>Seamlessly enable multimedia based technologies vis-a-vis client-centered platforms.</li>
              <li>Quickly fashion orthogonal methodologies vis-a-vis long-term high-impact bandwidth.</li>
            </ul>
          </li>
          <li id="map4-info">
            <h2 class="head">Map4 Information</h2>
            <h3>Learned Skills</h3>
            <ul>
              <li>Seamlessly enable multimedia based technologies vis-a-vis...

CSS

.model-diagram .model-content-wrapper {overflow:hidden;border:1px solid #cdcdcd;overflow:hidden;padding:20px;font-family:Arial,sans-serif;}
.model-diagram .model-content-wrapper .section {float:left;width:360px;background:none;}
.model-diagram .model-content-wrapper .aside {float:right;width:180px;border-left:1px dotted #ccc;padding-left:40px;}
.model-diagram .model-content-wrapper .head {margin:0 0 10px 0;text-transform:uppercase;}
.model-diagram .model-content-wrapper .tab-content {list-style:none;font-size:11px;}
.model-diagram .model-content-wrapper .tab-content ul {list-style: disc inside;font-size:11px;}
.model-diagram .model-content-wrapper .tab-content ul li {margin:0;}
.model-diagram .model-content-wrapper .tab-content ul, .homepageStyle .model-diagram .model-content-wrapper .tab-content p, .homepageStyle .model-diagram .model-content-wrapper .tab-content .head-sub, .homepageStyle .model-diagram .model-content-wrapper .tab-content li {font-size:11px;}
.model-diagram .model-content-wrapper .head-sub {font-weight:bold;}
.model-diagram .model-header{padding:20px 30px;}
.model-diagram .model-header .head{line-height:24px;overflow:visible;margin:0 0 10px 0;}

JavaScript

$(function() {

  //initialize highlight             
  $('.map').maphilight({strokeColor:'379ee0',strokeWidth:0,fillColor:'379ee0',fillOpacity: 0.3});

            // initialize tabbing
            $(".tabs area:eq(0)").each(function(){
                $(this).addClass("current");$('#map1').trigger('mouseover');

            });
            $(".tab-content").each(function(){
                $(this).children(":not(:first)").hide();    
            });

            //map clicks
            $(".tabs area").click(function(){

                //areas loop:
                $(".tabs area").each(function(){
                    var d = $(this).data('maphilight') || {};
                    if(d.alwaysOn == true){
                      d.alwaysOn = false;  
                    }
                  });

                var data = $(this).data('maphilight') || {};
                data.alwaysOn = true;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');

                if ($(this).hasClass("current") == false)
                {
                    var thisTarget = $(this).attr("href");                          
                    $(this).parents(".tabs").find('area.current').removeClass('current');
                    $(this).addClass('current');  
                    $(this).parents(".model-content-wrapper").find(".tab-content").children(":visible").fadeOut(1, function() {
                        $(thisTarget).fadeIn("fast");
                    });

                }
                return false;
           });
});