JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<header>
    <nav class="toolbar">
        
        <h1 class="logo icons sr-logo">Your Site Name</h1>
        
        <ul class="button-group">
            
            <li class="group-li">
                <form name="SearchrevClientRedirector">
                    <select id="client_select" name="client_select">
                        <option value="1">Some stuff</option>
                        <option value="2">More Some stuff</option>
                    </select>
                </form>
            </li>
            
            <!-- HOME -->
            <li class="group-li"><a class="toolbar-button" href="#">Campaigns</a></li>
            
            <!-- NAVIGATOR -->
            <li class="group-li"><a class="toolbar-button" href="#">Navigator</a></li>
            
            <!-- REPORTS -->
            <li class="group-li menu">
                <a class="toolbar-button menu-button" href="/searchrev_reports.php">Reports</a>
                <ol class="menu-dropdown left">
                    <li><a class="" href="#"><label>Account</label></a></li>
                    <li><label>Schedule</label></li>
                    <li><a class="" href="#"><label>All Client Summary</label></a></li>
                    <li><a class="" href="#"><label>Active Client Summary</label></a></li>
                    <li><a class="" href="#"><label>Seo Keyword Report</label></a></li>
                </ol>
            </li>
            
            <!-- ADMINISTRATION -->
            <li class="group-li menu">
                <a class="toolbar-button menu-button" href="#">Administration</a>
                <ol class="menu-dropdown right">
                    <li><a class="" href="#"><label>Client Account</label></a></li>
                    <li><a class="" href="#"><label>Users</label></a></li>
                    <li><a class="" href="#"><label>Groups</label></a></li>
                    <li><a class="" href="#"><label>Ad Network Mapping</label></a></li>
                 ...

CSS

/* @group CSS Reset */
/*
    HTML5 Reset :: style.css
    ----------------------------------------------------------
    We have learned much from/been inspired by/taken code where offered from:
    
    Eric Meyer                    :: http://ericmeyer.com
    HTML5 Doctor                :: http://html5doctor.com
    and the HTML5 Boilerplate    :: http://html5boilerplate.com
    
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}                                    

article, aside, figure, footer, header, hgroup, nav, section {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
   There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
    don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align:...

JavaScript

//Header Drop-Down menu
$(".menu").hover(function() {
    $(this).children().addClass("active");
}, function() {
    $(this).children().removeClass("active");
});

//Client Message Box
$("#clientMsgCounter").click(function(e) {
    e.preventDefault();
    $("#message-new").show();
    $(this).addClass("active");
    $("#message-list").css({
        'display': 'block'
    });
});
$("#message-new").mouseup(function() {
    return false
});
$(document).mouseup(function(e) {
    if ($(e.target).parent("#clientMsgCounter").length == 0) {
        $("#clientMsgCounter").removeClass("active");
        $("#message-new").hide();
    }
});

clientMessages("0", "clientMsgCounter", "message-list");

//show new note interface command addNewMsg
$("#message-add").click(function(e) {
    e.preventDefault();
    $(".clientMessages").addClass("active");
    $("#message-new").show();
    $("#message-list").css({
        'display': 'none'
    });
});

//add new note command
$("#msgBtnSubmit").click(function(e) {
    e.preventDefault();
    var msg = $('#inpMessage').val();
    var priority = $(":checkbox[name='inpMessage']:checked").length == 1 ? 1 : 0;

    $.ajax({
        url: '/ajax/client_msg/cdb_client_msg.php',
        data: 'sr3=<%$client_sr3%>&action=set&priority=' + priority + '&msg=' + msg,
        success: function(data) {
            alert(data);
            clientMessages("<%$client_sr3%>", "clientMsgCounter", "message-list");
        }
    });

    $("#message-new").hide();
    $("#inpMessage").val("");
});

//cancel new note command
$("#msgBtnCancel").click(function(e) {
    e.preventDefault();
    $("#message-new").hide();
    $("#inpMessage").val("");
    $("#clientMsgCounter").removeClass("active");
});