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="main_tabs">
    <ul id="main_tabs_nav">
        <li class="sn1"><a id="divleftlink0" rel="nofollow" href="javascript:divActivate(0,2,'divleft');" class="active">Newsletter</a>
        </li>
        <li class="sn2"><a id="divleftlink1" rel="nofollow" href="javascript:divActivate(1,2,'divleft');" class="inactive">Get Social</a>
        </li>
        <li class="sn3"><a id="divleftlink2" rel="nofollow" href="javascript:divActivate(2,2,'divleft');" class="inactive">Testimonials</a>
        </li>
    </ul>
    <div id="main_tabs_repeat">
        <div id="divleftcontent0" style="display: block;">
             <h3>Get A Massive 10% Off! when you sign up to Jenier news.</h3>

            <div class="tab_sep"></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="news_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" />
                        <input type="hidden" name="doubleopt"...

CSS

body {
    padding: 1em;
}
body {
    font: normal 62.5% Arial, Helvetica, sans-serif;
}

#main_tabs {
    position: relative;
    float: right;
    width: 320px;
}

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



#main_tabs #main_tabs_nav li a {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    height: 56px;
    border: 0;
}
#main_tabs a {
    color: #4a6491;
    text-decoration: underline;
}
#main_tabs a {
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

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

#main_tabs_nav li.sn2 a {
    width: 107px;
    background: transparent url("http://i.imgur.com/d6DZre5.png") -107px 0 no-repeat;
    text-indent: -9999px;
}
#main_tabs_nav li.sn3 a {
    width: 106px;
    background: transparent url("http://i.imgur.com/d6DZre5.png") -214px 0 no-repeat;
    text-indent: -9999px;
}
#main_tabs a.active {
    background: transparent url("http://i.imgur.com/d6DZre5.png") 0 -56px no-repeat;
}

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

#main_tabs_repeat {
    position: relative;
    float: left;
    width: 320px;
    margin: 56px 0 0 0;
    /*background: transparent url("http://www.jenierteas.com/templates/default/images/hp_tabs_bottom_repeat.png") 0 0 repeat-y;*/
  height: 315px;
  background-color: #313f5e;
  border-radius: 0px 0px 4px 4px;
}
#main_tabs #divleftcontent0, #divleftcontent1, #divleftcontent2 {
    position: relative;
    float: left;
    width: 320px;
    height: 296px;
    padding: 15px 0 0 0;
}
#main_tabs #divleftcontent0 h3 {
    position:...

JavaScript

function divActivate(e, d, c) {
    var a = 0;
    for (a = 0; a <= d; a++) {
        if (a != e) {
            try {
                document.getElementById(c + "content" + a).style.display = "none";
            } catch (b) {}
            try {
                document.getElementById(c + "link" + a).className = document.getElementById(c + "link" + a).className.replace(/\bactive\b/, "");
            } catch (b) {}
        }
    }
    try {
        if (document.getElementById(c + "content" + e).style.display != "block") {
            document.getElementById(c + "content" + e).style.display = "block";
            document.getElementById(c + "link" + e).className += " active";
        }
    } catch (b) {}
}
$('.scrollable4 .items').cycle({
    fx: 'scrollLeft',
    speed:700,
    timeout: 0,
    next: '.next',
    prev: '.prev',
    easing: 'easeInOutBack',
})