JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

<script>
    //twitter function
    $.fn.myFn = function(options){
    var defaults = {
    search: 'blue',
    wrapper: 'li'     
    };
    var options = $.extend(defaults, options);
    var obj = this;
    $(obj).html('');
    var wrapperLeft = '<'+ options.wrapper + '>';
    var wrapperRight = '</'+ options.wrapper + '>';
    var tweeturl = 'http://search.twitter.com/search.json?q='+ options.search +'&rpp=5&include_entities=true&callback=?';
    $.ajax({
    url: tweeturl,
    dataType: 'jsonp',
    success: function(data){
    $.each(data.results, function(i, item){
    $(obj).append(wrapperLeft + item.text + wrapperRight);
    });
    }
    
    });
    }
</script>    

<div class="info">Loading...</div>
<div id="overlay"></div>
<div id="notificationC">
    <div id="osx-modal-title">Inbox
    <div class="close"><a href="#">X</a></div>
    </div>
    <div ID="rightNav">
        <a rel="alert" href="">Alert <span class="count">6</span> </a>
        <a rel="note" class="current" href="">Notes <span class="count">6</span></a>
        <a rel="reminder" href="">Reminders <span class="count">6</span></a>
        <a rel="history" href="">History <span class="count">6</span></a>
        <a rel="completedS" href="">Completed studies <span class="count">6</span></a>
        <a rel="openS" href="">Open studies <span class="count">6</span></a>
    </div>
    <div>
        <input class="btnback" type="button" value="Back" />
        <input class="" type="button" value="Addd Note" />
        <input class="" type="button" value="Add Reminder" />

    </div>
    <div ID="mainPane">
        <div id="mainTbl">
            <table width="100%">
                <tbody>
                    <tr>
                        <td>title</td>
                        <td>Item details</td>
                        <td>date</td>
                    </tr>
                    <tr>
                        <td>title</td>
                        <td>Item details</td>
                       ...

CSS

a, a:visited{
    text-decoration: none;
    color: #FFF;
}
.info{
    width: 80px;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    color: #555;
    z-index: 100000;
    padding: 3px 0 3px 0;
    background-color: #C3E4FD;
    border: 1px solid #688FDC;
    box-shadow: 0 0 5px #688FDC;
    margin-left: 50%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

#overlay{
position:fixed;
z-index:9000;
background-color:#000;
width: 100%;
height: 100%;
opacity: .65;
display: none;
     cursor: wait;
}
.close{
float: right;
}
.close a {
display: block;
color: #777 !important;
font-size: 10px;
font-weight: bold;
padding: 6px 12px 0;
text-decoration: none;
text-shadow: 0 1px 0 #F4F4F4;
line-height: 5px;
}
.close a:hover{
    color: #333 !important;
}
#notificationC {
color: black;
font-family: "Lucida Grande",Arial,sans-serif !important;
font-size: .9em;
background-color: #EEE;  
border-bottom-left-radius: 6px 6px;
border-bottom-right-radius: 6px 6px;
width: 600px;
height: 400px;
z-index: 9999;
position: absolute;    
display: none;    
}

#osx-modal-title {
color: black;
background-color: #DDD;
border-bottom: 1px solid #CCC;
font-weight: bold;
padding: 6px 8px;
text-shadow: 0 1px 0 #F4F4F4;
}   

#rightNav{
    width: 150px;
    float: left;
}
#rightNav a{
    display: block;
    background: #FBFBFB;
    border-bottom: 1px solid #DDD;
    color: #111;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 8px;
    text-shadow: white 0 1px 1px;
    white-space: nowrap;
}
#rightNav a:hover{
    background: #D2D2D2;       
}
#rightNav a.current{
    background: #EEE;
    left: 1px;
    position: relative;
}
#mainPane{
    float: left;
    font-size: 12px;
    width: 440px;
    height: 300px;
    overflow: auto;
    border-left: 1px solid #DDD;
}
#mainTbl tr{
    border-bottom: 1px solid #DDD;
    border-top: 1px solid #DDD;
    cursor: pointer;
    
}
#mainTbl tr:hover{
    background: #FBFBFB;
}
#mainTbl td{
    padding: 4px 0...

JavaScript

jQuery.ajaxPrefilter(function( options ) {
    options.global = true;
});

$(document).ajaxStart(function() {
    $('.info').show();
});

$(document).ajaxStop(function() {
    $('.info').hide();
});

$('#mainTbl tr').click(function() {
    //var data = $(this).children().eq(1).text();
    $('#details').myFn();
    $('#details').show();
    $('#mainTbl').hide();
    $('.btnback').show();
});

$('.btnback').click(function() {
    $('#mainTbl').show();
    $('#details').hide();
    $(this).hide();
});

$('#footer a').click(function(){
    var p = $(this).parent('li').attr('class');
    var winW = $(window).width();
   $('#notificationC').css('left', winW/2-$('#notificationC').width()/2);
   $('#overlay').fadeIn(800);
   $('#notificationC').delay(600).slideDown('slow');
   $('#rightNav .current').removeClass('current');
   $('#rightNav').find('a[rel='+p+']').addClass('current');
    return false;
});

$('#rightNav a').click(function(){
    $('#rightNav .current').removeClass('current');
    $(this).addClass('current');
    return false;
    
});

$('.close, #overlay').click(function(e){
    e.preventDefault();
    $('#notificationC').slideUp('slow');
    $('#overlay').delay(600).fadeOut(800);
});