JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<link rel="stylesheet" href="http://www.rocktfan.com/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="http://www.rocktfan.com/resources/css/header.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<div class="header_div">
    <div class="" style="width:94%; min-width:825px;">	<a href="/home"><img src="http://www.rocktfan.com/images/rfan_w.png" style="width:165px; margin-top:0px; margin-left:-1%;" /></a>

        <ul style=" float:right; margin:3px 1% 0 0;" class='nav nav-pills'>
            <li id="search-li">
                <a href='#'></a>
                <div id="search-div">
                    <input type="text" id="search-btn" placeholder="rocktfan" value="" />
                    <div class="btn-group" id="search-holder">
                        <button class="btn dropdown-toggle" id="search-button" data-toggle="dropdown">search <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu rfan" style="font-size:13px;">
                            <li><a href="#" onclick="searchRF('1')">all posts</a></li>
                            <li><a href="#" onclick="searchRF('2')">walls</a></li>
                            <li><a href="#" onclick="searchRF('3')">artists</a></li>
                            <li><a href="#" onclick="searchRF('4')">rocktfans</a></li>
                            <li><hr /></li>
                            <li><a href="#" onclick="searchRF('5')">my posts</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li id="radar-li" class=""><a href="#"></a></li>
            <li id="notification-li" class="dropdown"><a href="#" class='active dropdown-toggle' data-toggle="dropdown"><span>5</span></a>
                <ul style="margin-left:-105px; width:260px;"  class="dropdown-menu">
                    <li class=""><h2>notifications</h2></li>
                    <li...

CSS

body{
    font-family: 'Open Sans',sans-serif;
font-style: normal;
font-size:13px;
}
.cssmenu > ul > li > ul {
    opacity: 1;
    top: 60px;
    visibility: visible;
    display:none;
    
}


.header_div > div > ul > li > ul {
    top:45px;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}

.header_div > div > ul > li > ul:after {
  position: absolute;
  top: -7px;
  left: 112px;
  display: inline-block;
  border-right: 13px solid transparent;
  border-bottom: 13px solid white;
  border-left: 13px solid transparent;
  content: '';
}
.header_div > div > ul > li > ul > li:hover, .header_div > div > ul > li > ul > li > a:hover {
    background: #DCE7F4;
    color: #366093;
    background-image: none;    
}
.header_div > div > ul > li > a{
    color:#a0a0a0;
    background:none;
}
.header_div > div > ul > li > a:hover{
    color:#fff;
}
.header_div > div > ul > li > a:first-child{
width: 32px;
height: 32px;
text-align: center;
display: inline-block;
padding: 0;
margin: 5px 5px 0 5px;    
}
#search-li > :first-child{
    background: url(http://www.rocktfan.com/images/header_icons.png) 0px -32px;
}#search-li:hover > :first-child{
    background: url(http://www.rocktfan.com/images/header_icons.png) 0px 0px;
}
#radar-li > :first-child{
    background: url(http://www.rocktfan.com/images/header_icons.png) 96px -32px;
}#radar-li:hover > :first-child{
    background: url(http://www.rocktfan.com/images/header_icons.png) 96px 0px;
}
#notification-li > :first-child{
    background: url(http://www.rocktfan.com/images/header_icons.png) 64px -32px;
}#notification-li:hover > :first-child{
    background: url(http://www.rocktfan.com/images/header_icons.png) 64px 0px;
}#notification-li > .active:first-child{
    background: url(http://www.rocktfan.com/images/header_icons.png) 64px -64px;
}#notification-li > :first-child > span{
    display:inline;
    position:relative;
    color:#fff;
    top:10px;
   ...

JavaScript

$("#search-li").click(function(){
    $(this).find(">:first-child").hide();
    $("#radar-li").hide();
    $("#search-div").show();
    $("#search-btn").focus();
});
$("#search-div").on('focusout', function(){
    $(this).hide();
    $("#radar-li").show();
    $("#search-li").find(">:first-child").show();
});
/*
$("#notification-li a").click(function(){
    $("#notification-li ul").toggle();
});*/