JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<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>Receive exclusive offers, brewing tips, health info &amp; caffeine content info as well as 10% off your first online order.</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" value="0" />
                        <input type="hidden" name="fields_fname" value="" />
        ...

CSS

body {
    padding: 1em;
}
body {
    font: normal 62.5% Arial, Helvetica, sans-serif;
}
h1 {
    font-size: 120px;
    margin-top: 0;
    font-family: Arial, sans-serif;
    text-shadow: 2px 0px 15px #292929;
    letter-spacing: -7px;
    text-decoration: none;
    color: #DDDDDD;
}
#main_tabs {
    position: relative;
    float: right;
    width: 322px;
}
div {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
ul, ol {
    color: #777;
}
#main_tabs_nav {
    position: absolute;
    top: -3px;
    left: 0;
    width: 322px;
    height: 60px;
    padding: 0;
    margin: 0;
    z-index: 1;
}
#main_tabs_nav li {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    background: 0;
}
ul {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
#main_tabs_nav li.sn1 a {
width: 108px;
background: transparent url("http://www.jenierteas.com/templates/default/images/hp_tabs_menu.png") 0 0 no-repeat;
text-indent: -9999px;
}

#main_tabs_nav li a {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    height: 60px;
    border: 0;
}
a {
    color: #4a6491;
    text-decoration: underline;
}
a {
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
#main_tabs_nav li.sn2 a {
    width: 102px;
    background: transparent url("http://www.jenierteas.com/templates/default/images/hp_tabs_menu.png") -108px 0 no-repeat;
    text-indent: -9999px;
}
#main_tabs_nav li.sn3 a {
    width: 111px;
    background: transparent url("http://www.jenierteas.com/templates/default/images/hp_tabs_menu.png") -210px 0 no-repeat;
    text-indent: -9999px;
}
a.active {
    background: transparent...

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) {}
}