JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<div>    
<div id="sub-link-bar"> </div>

    <div id="wrap">

        <div class="roundfg">
     
    <ul id="main-nav">
    <li><a class="main-link" href="#">Home</a>
    <ul class="sub-links">
    <li><a href="#">Home</a></li>
    </ul>
    </li>
    <li><a class="main-link" href="#">Tutorials</a>
    <ul class="sub-links">
    <li><a href="#" >Design</a> </li>
    <li><a href="#">HTML &amp; CSS</a> </li>
    <li><a href="#" >Other</a> </li>
    <li><a href="#">PHP</a> </li>
    <li><a href="#">Ruby</a> </li>
    <li><a href="#">Site Builds</a> </li>
    <li><a href="#">Tools &amp; Tips</a> </li>
    <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
    </ul>
    </li>


    <li><a class="main-link" href="#">Videos</a>
    <ul class="sub-links">
    <li><a href="#">Screencasts</a> </li>
    </ul>
    </li>
    <li><a class="main-link" href="#">About</a>
    <ul class="sub-links">

    </ul>
    </li>
    </ul>
            </div></div></div>

CSS

html, body {  
 
        text-align: center;  
        margin: 0px;  
        height: 100%;  
        width: 100%;  
    }  
    #wrap {  
        margin-left: auto;  
        margin-right: auto;  
        width: 900px;  
        position: relative;  
        background: url(body.png) center no-repeat;  
        min-height: 600px;  
    }  
    #body-image {  
        margin-top: 60px;  
    }  
    #main-nav {  
        margin: 0px 0px 0px 2px;  
        text-align: left;  
        min-height: 25px;  
        padding-top: 10px;  
        padding-left: 0px;  
    }  
    #main-handle {  
        width: 605px;  
        float: rightright;  
        margin-top: -1px;  
    }  
    #main-nav li {  
        display: inline;  
        list-style: none;  
    }  
    #main-nav li a {  
        margin-right: 5px;  
        font-size: 15px;  
        text-decoration: none;  
        color: #f2f2f2;  
        font-family: Arial, Helvetica, sans-serif;  
        text-transform: uppercase;  
        font-weight: bold;  
        padding: 10px;  
        outline: 0;  
        position: relative;  
        top: -2px;  
    }  
    #main-nav li a:hover, #main-nav li a.active {  
        background: #514539;  
    }  
    #sub-link-bar {  
        background: #514539;  
        min-height: 10px;  
        border-bottom: #645546 1px solid;  
    }  
    .sub-links {  
        display: none;  
        position: absolute;  
        width: 100%;  
        top: -30px;  
        text-align: left;  
        left: 0px;  
    }  
    #main-nav li .sub-links li a:hover{  
        background: #2d2620;  
    }  
    #main-nav li a.close{  
        display: none;    
        position: absolute;  
    }  
    #main-nav li a.close:hover{  
        background: #900;  
    }  
    <style type="text/css">  
    .round{display:block}  
    .round *{  
      display:block;  
      height:1px;  
      overflow:hidden;  
      font-size:.01em;  
      background:#645546}  
    .round1{  
     ...

JavaScript

$(document).ready(function(){  
        
        
        
        $("#main-nav li a.main-link").hover(function(){  
            
            $("#main-nav li a.main-link").removeClass("active");                                                   
            $(this).addClass("active");                                        
            $("#sub-link-bar").animate({  
                height: "40px"                       
            });  
            $(".sub-links").hide();  
            $(this).siblings(".sub-links").fadeIn();  
        });  
        $("#main-nav li a").mouseleave(function(){  
            $("#main-nav li a.main-link").removeClass("active");                                                                                       
            $(".sub-links").fadeOut();  
            $("#sub-link-bar").animate({  
                height: "10px"                       
            });       
            $("#main-nav li a.close").fadeOut();  
        });   
    });