JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://grabbers.maddoggmedia.com/style.css">
<link rel="stylesheet" href="http://grabbers.maddoggmedia.com/css/boxes-plugin.css">
<script src="http://grabbers.maddoggmedia.com/js/jquery.imagesloaded.js"></script>
<script src="http://grabbers.maddoggmedia.com/js/jquery.wookmark.js"></script>
<div id="null"></div>

    <header id="head">
    
        <h1><a href="/"><img src="http://grabbers.maddoggmedia.com/img/logo.png" alt="Gabbers" title="Gabbers" width="158" height="61" /></a></h1>
    
        <nav>
        
            <ul>
            
                <li class="nav-home-list"><a href="#" class="nav-home"><img src="http://grabbers.maddoggmedia.com/img/nav-home.png" alt="nav-home" width="28" height="22" /></a></li>
            
                <li class="nav-notifications-list"><a href="#" class="nav-notifications"><img src="http://grabbers.maddoggmedia.com/img/nav-notifications.png" alt="nav-notifications" width="28" height="22" /></a></li>
                
                <li class="nav-bookmarks-list"><a href="#" class="nav-bookmarks"><img src="http://grabbers.maddoggmedia.com/img/nav-bookmarks.png" alt="nav-bookmarks" width="28" height="22" /></a></li>
                
                <li class="nav-filters-list"><a href="#" class="nav-filters"><img src="http://grabbers.maddoggmedia.com/img/nav-filters.png" alt="nav-filters" width="28" height="22" /></a></li>
            
            </ul>
        
        </nav>
        
        <div id="nav-user">
        
            <div id="nav-status"><img src="http://grabbers.maddoggmedia.com/img/status-green.png" alt="status-green" width="9" height="9" />Online</div>
            <div id="nav-status-offline"><img src="http://grabbers.maddoggmedia.com/img/status-red.png" alt="status-green" width="9" height="9" />Offline</div>
            
            <div id="nav-profile"><a href="#"><img src="http://grabbers.maddoggmedia.com/img/home-profile-picture.png" alt="home-profile-picture"...

JavaScript

// bookmark stars
$(document).ready(function() {

    $('#chat-box-chats').hide();

    $('#nav-status-offline').hide();

    $('.chat-box-banner').hide();

    // hides the slickbox as soon as the DOM is ready
    $(".chat-box-textinput").click(function() {
        $("#chat-box-chats").show();
    });

    $("#nav-status").click(function() {
        $("#nav-status-offline").show();
    });

    $("#nav-status").click(function() {
        $("#nav-status").hide();
    });

    $("#nav-status-offline").click(function() {
        $("#nav-status-offline").hide();
    });

    $("#nav-status-offline").click(function() {
        $("#nav-status").show();
    });

    $(".chat-box-textinput").click(function() {
        $(".chat-box-banner").show();
    });


    $('span.bookmark').click(function() {

        $('span.bookmark').toggleClass("pushed");

        $('span.bookmark img').toggleClass("noopacity");

    });



    $('textarea').each(function() {
        // Stores the default value for each textarea within each textarea
        $.data(this, 'default', this.value);
    }).focus(function() {
        // If the user has NOT edited the text clear it when they gain focus
        if (!$.data(this, 'edited')) {
            this.value = "";
        }
    }).change(function() {
        // Fires on blur if the content has been changed by the user
        $.data(this, 'edited', this.value != "");
    }).blur(function() {
        // Put the default text back in the textarea if its not been edited
        if (!$.data(this, 'edited')) {
            this.value = $.data(this, 'default');
        }
    });






    $('textarea').click(function() {

        $('textarea').toggleClass("big-textarea");

        $('.chat-box-banner').toggle();

    })









});








// basic show and hide
$(document).ready(function() {

    // hides the slickbox as soon as the DOM is ready
    $('div#notifications-box').hide();



    $('div#null').hide();

   ...