JSFiddle - React, Tailwind, and code Playground

by naveen

HTML

<div id="nav-bar"> 
    <div id="links-top"><a href="Calendar">Calendar</a></div> 
    <div id="links-top"><a href="Bands">Bands</a></div> 
    <div id="links-top"><a href="Gallery">Gallery</a></div> 
    <div id="links-top-bio">Bio</div> 
    <div id="links-top-music">Music</div> 
    <div id="links-top-links">Links</div> 
    <div id="links-top"><a href="Contact">Contact</a></div> 
    
</div> 

<div id="music-box-holder"> 
    <div id="music-box">            
        
        <embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=['/music/02 Ana Maria.m4a']" height="27" width="320"></embed> 
        
    </div>

CSS

@charset "UTF-8";
/* CSS Document */

body {
    width:960px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}

#nav-bar {
    height:50px;
    width:960px;
    margin-top:40px;
    margin-left:10px;
    border:1x solid #f6f6f6;
}

#links-top a {
    color:#ccc;
    font-size:22px;
    padding:10px;
    margin-right:15px;
    float:left;
    text-decoration:none;
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border:3px solid #fff;
    background-color:#fff;
    
}

#links-top a:hover {
    font-size:22px;
    padding:10px;
    margin-right:15px;
    float:left;
    border:3px solid #f6f6f6;
}

#links-top-music {
    color:#ccc;
    font-size:22px;
    padding:10px;
    margin-right:15px;
    float:left;
    text-decoration:none;
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border:3px solid #fff;
    background-color:#fff;
    cursor:pointer;
}

#links-top-music:hover {
    font-size:22px;
    padding:10px;
    margin-right:15px;
    float:left;
    border:3px solid #f6f6f6;
}

#links-top-contact a {
    color:#ccc;
    font-size:22px;
    padding:10px;
    margin-right:15px;
    float:left;
    text-decoration:none;
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border:3px solid #fff;
    background-color:#fff;
}

#links-top-contact a:hover {
    font-size:22px;
    padding:10px;
    margin-right:15px;
    float:left;
    border:3px solid #f6f6f6;
}


#links-top-bio {
    color:#ccc;
    font-size:22px;
    padding:10px;
    margin-right:15px;
    float:left;
    text-decoration:none;
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border:3px solid #fff;
    background-color:#fff;
    cursor:pointer;
}

#links-top-bio:hover {
    font-size:22px;
    padding:10px;
    margin-right:15px;
    float:left;
    border:3px solid #f6f6f6;
}

#links-top-links {
    color:#ccc;
   ...

JavaScript

$(document).ready(function() {
    $('#music-box').hide();
    $('#links-top-music').click(function(evt) {
        if ($('#music-box:visible').length) {
            $('#music-box').fadeOut(750);
        }
        else {
            $('#music-box').fadeIn(1000);
        }
        evt.preventDefault();
    });
});