JSFiddle - React, Tailwind, and code Playground

by photo_tom

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<div class="wrap">
    <!--banner-->
    <div class="head">
        <img src="images/banner.jpg">
    </div>
    <!--Menu under here-->
    <div id="myslidemenu" class="jqueryslidemenu">
        <ul>
            <li><a href="index.html">home</a>
            </li>
            <li><a href="about.html">about</a>
            </li>
            <li><a href="#"> Required genres</a>

                <ul>
                    <li><a href="your_page.html">favorite 1</a>
                    </li>
                    <li><a href="your_page.html">favorite 2</a>
                    </li>
                    <li><a href="your_page.html">favorite 3</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"> Text genres</a>

                <ul>
                    <li><a href="your_page.html">favorite 1</a>
                    </li>
                    <li><a href="your_page.html">favorite 2</a>
                    </li>
                    <li><a href="your_page.html">favorite 3</a>
                    </li>
                </ul>
            </li>
            <li><a href="#"> Multimedia genres</a>

                <ul>
                    <li><a href="your_page.html"> Comic Strip </a>
                    </li>
                    <li><a href="your_page.html">favorite 2</a>
                    </li>
                </ul>
            </li>
        </ul>
        <br style="clear: left" />
    </div>
    <div class="main">
        <!--*****************ALL PAGE INFO BELOW THIS LINE*****************-->
        <!--*****************ALL PAGE INFO ABOVE THIS LINE*****************-->
    </div>
    <div class="foot"></div>
</div>

CSS

/*page_control*/

/*This body area sets up the page defaults*/
 body {
    color:#000;
    margin:auto;
    text-align:center;
}
div {
    width:100%;
}
/*This #wrap area sets up the page structure*/

/*Connected to the <div class="wrap"> area of web page*/
 .wrap {
    width: 1250px;
    /*Width display area*/
    margin-left:auto;
    margin-right:auto;
    border:1px solid black;
}
/*This .head area sets up the top section*/

/*Connected to the <div id="page_top"> area of web page*/
 .head {
    height:250px;
    background:#34495e;
}
/*This .main area holds the page content*/

/*Connected to the <div class="main"> area of web page*/
 .main {
    background:#ffffff;
    height:1250px;
}
.foot {
    height:800px;
    line-height:800px;
    background:#34495e;
}
/*CSS for Diary Entries below here \(^.^)/  */
 .heading {
    color: rgb(16, 16, 16);
    font-family: proxima-nova, ‘Calibri Light’, ‘Lane - Narrow’, arial;
    font-weight: bold;
    text-align: center;
    font-size: 60px;
}
.dear {
    color: rgb(32, 32, 32);
    font-family: proxima-nova, ‘Calibri Light’, ‘Lane - Narrow’, arial;
}
.entry {
    color: rgb(64, 64, 64);
    font-family: proxima-nova, ‘Calibri Light’, ‘Lane - Narrow’, arial’;
    text-align: justify;
}
hr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
/*Menu controls*/
 .jqueryslidemenu {
    font-family: arial;
    background: #1abc9c;
    /*must match color below background of tabs line 25*/
    width: 100%;
    padding: 10px;
}
.jqueryslidemenu ul {
    margin: 0;
    padding-left: 0px;
    list-style-type: none;
    background: #1abc9c;
    border-right: 0px;
}
/*Top level list items*/
 .jqueryslidemenu ul li {
    position: relative;
    display:...