JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

<div class="dsm-content-wrap">
    <div class="dsm-panel-wrap">
        <div id="dsm-p1" class="dsm-panel">
            <div class="dsm-text" id="dsm-panel1"> <span>Compliance</span>

            </div> <span id="dsm-button1" class="dsm-preview-button">Preview</span>

        </div> <a class="dsm-panel-link" href="#"></a>

    </div>
    <div class="dsm-panel-wrap">
        <div id="dsm-p2" class="dsm-panel">
            <div class="dsm-text" id="dsm-panel2"> <span>Head Office Support</span>

            </div> <span id="dsm-button2" class="dsm-preview-button">Preview</span>

        </div> <a class="dsm-panel-link" href="#"></a>

    </div>
    <div class="dsm-panel-wrap">
        <div id="dsm-p3" class="dsm-panel">
            <div class="dsm-text" id="dsm-panel3"> <span>Suppliers</span>

            </div> <span id="dsm-button3" class="dsm-preview-button">Preview</span>

        </div> <a class="dsm-panel-link" href="#"></a>

    </div>
</div>
<div id="dsm-ppw1" class="dsm-preview-panel-wrap">
     <h3>Compliance</h3>
 <a class="dsm-preview-panel"><span>Lorem ipsum dolor</span></a>
 <a class="dsm-preview-panel"><span>Lorem ipsum dolor</span></a>
 <a class="dsm-preview-panel"><span>Lorem ipsum dolor</span></a>

</div>
<div id="dsm-ppw2" class="dsm-preview-panel-wrap">
     <h3>Head Office Support</h3>
 <a class="dsm-preview-panel"><span>Staff Profiles</span>
      </a>
 <a class="dsm-preview-panel"><span>Organisation Charts</span>
      </a>
 <a class="dsm-preview-panel"><span>Lorem ipsum dolor</span>
      </a>

</div>
<div id="dsm-ppw3" class="dsm-preview-panel-wrap">
     <h3>Suppliers</h3>
 <a class="dsm-preview-panel"><span>Lorem ipsum dolor</span></a>
 <a class="dsm-preview-panel"><span>Lorem ipsum dolor</span></a>
 <a class="dsm-preview-panel"><span>Lorem ipsum dolor</span></a>
 <a class="dsm-preview-panel"><span>Lorem ipsum dolor</span></a>
 <a class="dsm-preview-panel"><span>Lorem ipsum dolor</span></a>
 <a class="dsm-preview-panel"><span>Lorem ipsum...

CSS

body {
    text-align:center;
    font-family:sans-serif;
}
.dsm-content-wrap {
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    display: inline-block;
    position: relative;
}
.dsm-content-wrap * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dsm-panel-wrap {
    display: inline-block;
    padding: 8px;
    position: relative;
    text-align: center;
}
.dsm-panel {
    border: 8px solid white;
    box-shadow: 0 0 5px 0 rgba(50, 50, 50, 0.5);
    width: 300px;
    height: 300px;
    display: inline-block;
    text-align: left;
    vertical-align:top;
    transition: all .5s ease-in;
}
#dsm-p1 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-Compliance.gif) no-repeat 67px 0;
}
#dsm-p2 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-HOSupport.gif) no-repeat 67px 0;
}
#dsm-p3 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-Supplier.gif) no-repeat 67px 0;
}
#dsm-p4 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-TSP.gif) no-repeat 67px 0;
}
#dsm-p5 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-PRM.gif) no-repeat 67px 0;
}
#dsm-p6 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-DocL.gif) no-repeat 67px 0;
}
.dsm-panel:hover {
    box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.5);
}
.dsm-text {
    display: inline-block;
    padding: 16px;
    padding-bottom: 80px;
    color: #fff;
    font-size: 16px;
    font-weight:bold;
    margin-top: 165px;
    margin-left: 12px;
    width: 190px;
    max-height: 124px;
}
.dsm-text:after {
    content:'';
    position: absolute;
    top: 131px;
    left: 38px;
    width:44px;
    height:50px;
}
#dsm-panel1 {
   ...

JavaScript

// $(".dsm-preview-button").click(function () {
  //     var $panel = $(this).next(".dsm-preview-panel-wrap");
  //     $(this).toggleClass('dsm-active');
  //   $panel.slideToggle();
  //    $(".dsm-preview-panel-wrap").not($panel).slideUp();
  //  });
 jQuery("#dsm-ppw1, #dsm-ppw2, #dsm-ppw3, #dsm-ppw4, #dsm-ppw5, #dsm-ppw6").hide();

  jQuery("#dsm-button1").click(function () {
      jQuery(this).toggleClass('dsm-active');
      jQuery("#dsm-ppw2, #dsm-ppw3, #dsm-ppw4, #dsm-ppw5, #dsm-ppw6").hide();
      jQuery("#dsm-button2, #dsm-button3, #dsm-button4, #dsm-button5, #dsm-button6").removeClass('dsm-active');
      jQuery("#dsm-ppw1").toggle();
  });

  jQuery("#dsm-button2").click(function () {
      jQuery(this).toggleClass('dsm-active');
      jQuery("#dsm-ppw1, #dsm-ppw3, #dsm-ppw4, #dsm-ppw5, #dsm-ppw6").hide();
      jQuery("#dsm-button1, #dsm-button3, #dsm-button4, #dsm-button5, #dsm-button6").removeClass('dsm-active');
      jQuery("#dsm-ppw2").toggle();
  });

  jQuery("#dsm-button3").click(function () {
jQuery(this).toggleClass('dsm-active');
      jQuery("#dsm-ppw1, #dsm-ppw2, #dsm-ppw4, #dsm-ppw5, #dsm-ppw6").hide();
      jQuery("#dsm-button1, #dsm-button2, #dsm-button4, #dsm-button5, #dsm-button6").removeClass('dsm-active');
      jQuery("#dsm-ppw3").toggle();
  });

  jQuery("#dsm-button4").click(function () {
      jQuery(this).toggleClass('dsm-active');
     jQuery("#dsm-ppw2, #dsm-ppw3, #dsm-ppw1, #dsm-ppw5, #dsm-ppw6").hide();
      jQuery("#dsm-button2, #dsm-button3, #dsm-button1, #dsm-button5, #dsm-button6").removeClass('dsm-active');
      jQuery("#dsm-ppw4").toggle();
  });

  jQuery("#dsm-button5").click(function () {
      jQuery(this).toggleClass('dsm-active');
      jQuery("#dsm-ppw1, #dsm-ppw2, #dsm-ppw3, #dsm-ppw4, #dsm-ppw6").hide();
      jQuery("#dsm-button1, #dsm-button3, #dsm-button4, #dsm-button2, #dsm-button6").removeClass('dsm-active');
      jQuery("#dsm-ppw5").toggle();
  });
  jQuery("#dsm-button6").click(function () {
 ...