JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<div id="top">

<ul class="linkCont">
    <li><a href="javascript:void(0)" class="userImgLink"></a>&nbsp;&nbsp;</li>
    <li id="statusList"><a href="" class="user active">Ricky Bedi</a>

        <ul class="statusList">
          <li><a href="" class="acti" rel="active">Online</a></li>
          <li><a href="" class="away" rel="awayS">Away</a></li>
          <li><a href="" class="busy" rel="busyS">Busy</a></li>
          <li><a href="" class="invi" rel="inviS">Invisible</a></li>
        </ul>

    </li>
    <li><span class="separator">|</span>
    </li><li id="settings">
      <a href="" class="settings">Settings</a>
      <ul class="settingsUl">
        <li><a href="preferences.php" class="pref">Preferences</a></li>
        <li><a href="full_calendar.php" class="mycal">My Calendar</a></li>
      </ul>
    </li>
    <li><span class="separator">|</span></li>
    <li><a href="index.php" class="signout">Signout</a></li>
</ul>
</div>
sdmalskmdsa
sdmalskmdsasdmalskmdsa
sdmalskmdsasdmalskmdsasdmalskmdsasdmalskmdsasdmalskmdsa
sdmalskmdsasdmalskmdsasdmalskmdsasdmalskmdsa

CSS

/*Main Layout*/
body, html
{
    background: url('../images/pagebg.gif'), url('../images/bgTileGrey3.jpg');
    background-repeat: repeat-x, repeat;
    background-color: #F0F0F0;
    color: #666;
    font-family: 'Lucida Grande',Verdana,sans-serif;
    font-size: 11px;
    line-height: 20px;
}

a {
    text-decoration: none;
    color: #0063D3;
}

.layout
{
    width: 95%;
    min-width: 960px;
    margin: 0 auto;
}

.logo
{
    height: 75px;
}

.layout .body
{
    margin-top: 10px;
    
}

.titlebar {
    border-bottom: 1px solid #ffffff;
    background-color: #F5F5F5;
    box-shadow: #C4C4C4 0 1px 2px;
    padding: 10px;
}

.content-box {
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    margin-bottom: 25px;
    box-shadow: 0 0 3px #CCC;
}

.main-content
{
    padding: 15px;
}


/*Common style*/

.fake-anchor {
    cursor: pointer;
}

#tooltip
{
    position: absolute;
    border: 1px solid #333;
    background: #f7f5d1;
    padding: 2px 5px;
    color: #333;
    display: none;
}

.gapOfRohan {
    margin-top: 10px;
    margin-bottom: 10px;
}

.subTitle {
    border-bottom: 1px solid #ffffff;
    background-color: #F5F5F5;
    box-shadow: #C4C4C4 0 1px 1px;
    padding: 3px;
    margin-bottom: 8px;
    cursor: pointer;
}

.subTitle-active {
    color: #078CDB;
}

.buttonBar {
    border: 1px solid #DDD;
    background-color: #F7F7F7;
    padding: 3px;
    margin-bottom: 3px;
}

/*Input element styles*/

input[type="checkbox"] {
        vertical-align: text-bottom;
}

select {
    width: inherit;
    max-width: 40%;
}

input[type="text"] {
    height: 20px;
}

input[type="text"], input[type="password"], textarea {
    width: inherit;
}

.focusField{
    border:solid 1px #73A6FF;
    background:#EFF5FF;
    color:#000;
}
.idleField
{
    color: #999999;
    border: solid 1px #DFDFDF;
    font-family: Verdana, Geneva, sans-serif;
}

.hideSidebar {
    margin: 0 3px 0 3px;    
}

/*Tooltip and Alert box*/

#easyTooltip{
padding:5px 10px;
border:1px...

JavaScript

$("body").click(function(){
     $('.on').hide();
});


$('li a').click(function(e){
    $('.on').hide();
    $(this).next().toggle().addClass('on');  
    return false;
    
});