JSFiddle - React, Tailwind, and code Playground

by refhat

HTML

<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>
    <div id=container>
        <div id="wrapper">

            <div id="content">
                <div id="class">
                    <div id="classnav">
                        <ul>
                            <li>
                                <a href="#1" class="class1">Introductory Classes</a>
                            </li>
                            <li>

                                <a href="#2" class="class2">Private Lessons</a>
                            </li>
                            <li>
                                <a href="#3" class="class3">Duet Lessons</a>
                            </li>
                        </ul>
                    </div>    
                    <div id="classpanes">

                        <div>
                        <h2>Introductory Classes</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum molestie euismod. Morbi dapibus interdum ipsum, volutpat posuere libero porttitor venenatis. Sed commodo consequat erat, sed cursus arcu tempor et. Curabitur pellentesque risus sed risus malesuada egestas. Sed hendrerit arcu in magna scelerisque elementum. Nulla purus tellus, euismod quis tempus sed, porttitor in massa. Sed ut aliquet nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas id accumsan magna. Integer tincidunt, ante vel sodales tempus, diam magna porttitor turpis, eu porttitor lorem lectus eu nisl. Pellentesque ac enim vitae dui molestie sodales ut non sem. Proin quis tellus vel elit interdum accumsan. Quisque fermentum nulla ultricies elit tristique ut lacinia quam pellentesque.</p><p>Vestibulum elementum diam ac lectus fermentum in blandit ante viverra. Duis massa metus, aliquet a elementum eleifend, congue in lectus. Sed vel diam enim, a mattis orci. Sed dictum sodales tellus, vitae elementum nibh dictum at. Sed rhoncus nunc sed urna...

CSS

body {
    text-align: center;
    background: #dbd3c6;
    margin-top: 20px;
}

#container {
    width: 980px;
    position: relative;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
}

#wrapper {
    text-align: left;
    overflow: hidden;
    background: #fdf9ee;
    width: 958px;
    left: 0;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-left: 20px;
}


p{
    font: 13px/19px "Helvetica Neue", Helvetica, sans-serif;
    color: #0F2F68;
    position: relative;
    left: 0;
    margin-right: 0;
    margin-top: 6px;
    margin-left: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: #284E93;
    letter-spacing: -0.025em;
    margin: 0;
    padding: 0;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
}



#class{
    position: relative;
}

#classnav {
    width: 175px;
    float: left;
}

#classnav ul {
    font: 16px/19px "Helvetica Neue", Helvetica, sans-serif;
    list-style-type:none;
    padding: 0;
    margin: 0;
}
#classnav li {
    padding-bottom: 5px;
}

#classnav a {
    text-decoration:none;
    color: #7FA4EB;
    }    
    
#classnav a.current {
    color: #284E93;
}
    
#classpanes {
    position: relative;
    width: 720px;
    float: left;
    margin-top: -4px;
    overflow: visible;
    height: 300px;
}
#classpanes div {
    display:none;
    
}

JavaScript

$(function() {
        $("#class ul").tabs("#classpanes > div", {effect: 'fade', fadeOutSpeed: 200});
        $("#classpanes").css("height","auto");
    });