JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://www.jenierteas.com/templates/default/js/jquery.cycle.all.2.74.pack.js"></script>
<div id="nst_block">
    <ul id="nst_headers">
        <li class="newsletter_header"><a id="newsletter_body_link" rel="nofollow" href="javascript:switchDiv('newsletter');" class="active">Newsletter</a>
        </li>
        <li class="social_header"><a id="social_body_link" rel="nofollow" href="javascript:switchDiv('social');" class="inactive">Get Social</a>
        </li>
        <li class="testimonials_header"><a id="testimonials_body_link" rel="nofollow" href="javascript:switchDiv('testimonials');" class="inactive">Testimonials</a>
        </li>
    </ul>
    <div id="nst_block_repeat">
        <div id="newsletter_body" style="display: block;">
             <h3>Get A Massive 10% Off! when you sign up to Jenier news.</h3>

            <div class="tab_separator"></div>
            <p>Stay up-to-date on the latest Blu-rays, receive exclusive limited time offers not available to the public, and much more.</p>
            <div id="newsletter_form">
                <form method="post" action="https://app.icontact.com/icp/signup.php" id="lettermanModHP">
                    <fieldset id="newsletter_form_hp">
                        <legend>eNewsletter</legend>
                        <input type="hidden" name="redirect" value="http://www.jenierteas.com/newsletter-signup-thank-you-a78" />
                        <input type="hidden" name="errorredirect" value="http://www.jenierteas.com/" />
                        <input type="hidden" name="listid" value="2175" />
                        <input type="hidden" name="specialid:2175" value="EF2I" />
                        <input type="hidden" name="clientid" value="923948" />
                        <input type="hidden" name="formid" value="186" />
                        <input type="hidden" name="reallistid" value="1" />
...

CSS

#nst_headers li.newsletter_header a { /**ISSUE**/
width: 107px;
background: transparent url("http://i.imgur.com/d6DZre5.png") 0 0 no-repeat;
text-indent: -9999px;
}

#nst_headers li.social_header a { /**ISSUE**/
    width: 107px;
    background: transparent url("http://i.imgur.com/d6DZre5.png") -107px 0 no-repeat;
    text-indent: -9999px;
}
#nst_headers li.testimonials_header a { /**ISSUE**/
    width: 106px;
    background: transparent url("http://i.imgur.com/d6DZre5.png") -214px 0 no-repeat;
    text-indent: -9999px;
}

#nst_block #testimonials_body div {
    position: relative;
    width: 245px;
    margin: 0 auto 0 auto;
}

#nst_block table td {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #dde2e8;
    font-size: 1.1em;
}

#nst_block {
    position: relative;
    float: right;
    width: 320px;
    font: normal 62.5% Arial, Helvetica, sans-serif;
}

#nst_block a {
    color: #4a6491;
    text-decoration: underline;
      outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

#nst_block p {
    font-size: 1.2em;
    line-height: 1.66em;
    margin: 0 0 15px 0;
}

#nst_block #nst_headers {
    position: absolute;
    top: 0px;
    left: 0;
    width: 320px;
    height: 56px;
    padding: 0;
    margin: 0;
    z-index: 1;
}
#nst_block #nst_headers li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    background: 0;
}

#nst_block #nst_headers li a {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    height: 56px;
    border: 0;
}


#nst_block a.active {
    background: transparent url("http://i.imgur.com/d6DZre5.png") 0 -56px no-repeat;
}

#nst_block ul li {
    list-style: none;
    color: #777;
}

#nst_block #nst_block_repeat {
    position: relative;
    float: left;
    width: 320px;
    margin: 56px 0 0 0;
  height: 315px;
  background-color: #313f5e;
  border-radius: 0px 0px 4px...

JavaScript

function switchDiv(e) {
      
      if(e == 'newsletter')
      {
        try
        {
          document.getElementById('newsletter_body').style.display = "block";
          document.getElementById('newsletter_body_link').className += " active";
          
          document.getElementById('social_body').style.display = "none";
          document.getElementById('social_body_link').className = document.getElementById('social_body_link').className.replace(/\bactive\b/, "");
          
          document.getElementById('testimonials_body').style.display = "none";
          document.getElementById('testimonials_body_link').className = document.getElementById('testimonials_body_link').className.replace(/\bactive\b/, "");
        } catch (b) {}
      }
      else if(e == 'social')
      {
        try
        {
          document.getElementById('social_body').style.display = "block";
          document.getElementById('social_body_link').className += " active";
          
          document.getElementById('newsletter_body').style.display = "none";
          document.getElementById('newsletter_body_link').className = document.getElementById('newsletter_body_link').className.replace(/\bactive\b/, "");
          
          document.getElementById('testimonials_body').style.display = "none";
          document.getElementById('testimonials_body_link').className = document.getElementById('testimonials_body_link').className.replace(/\bactive\b/, "");
        } catch (b) {}
      }
      else if(e == 'testimonials')
      {
        try
        {
          document.getElementById('testimonials_body').style.display = "block";
          document.getElementById('testimonials_body_link').className += " active";
          
          document.getElementById('newsletter_body').style.display = "none";
          document.getElementById('newsletter_body_link').className = document.getElementById('newsletter_body_link').className.replace(/\bactive\b/, "");
          
         ...