JSFiddle - React, Tailwind, and code Playground

by Saeed Abbaspour

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<body>
     <h1>Imaging Services</h1>

    <!-- Select the Object -->
    <section class="main-layout">
        <div class="row">
            <ul class="menu user-menu dropit">
                <li> <a class="dropit-trigger">Saeed Abbaspour<i class="fa fa-2x fa-user"></i></a>

                    <ul class="dropit-submenu">
                        <li><a href="">Profile</a>

                        </li>
                        <li><a href="">Dashboard</a>

                        </li>
                        <li><a href="" class="btn submit">Add New Job</a>

                        </li>
                        <li><a href="">Sign Out</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <hr>
        <div>
            <table class="">
                <tr class="table-header">
                    <th>Job Number</th>
                    <th>Job Discription</th>
                    <th>Submition Date</th>
                    <th>Status</th>
                </tr>
                <tr>
                    <td>1234</td>
                    <td>Test</td>
                    <td>01/01/2015</td>
                    <td> <a href="" class="btn draft">Draft</a>

                    </td>
                </tr>
                <tr>
                    <td>1234</td>
                    <td>Test</td>
                    <td>01/01/2015</td>
                    <td> <a href="" class="btn submit">Submitted</a>

                    </td>
                </tr>
                <tr>
                    <td>1234</td>
         ...

CSS

/* 

	Job Status Color Coding: 

		draft: 			#337AB7;
		submit: 		#5CB85C;
		process: 		#F0AD4E;
		notification: 	#D9534F;
		complete:   	#333;

		



	*/
 body {
    padding: 3%;
    background-color: #f1f1f1;
}
header.title, h1:after, h2:after, h3:after {
    border-bottom: none;
}
hr {
    border-top: none;
    border-bottom: 1px solid #f1f1f1;
    margin: 1% 0;
}
table {
    width: 100%;
}
table tr {
    border: 1px solid #f1f1f1;
}
table th, table td {
    padding: 1%;
    vertical-align: middle;
}
/* Grid System */
[class*='col-'] {
    float: left;
    padding: 0;
}
.row {
    margin: 0;
}
.row:after {
    content:"";
    display: table;
    clear: both;
}
.col-1 {
    width: calc(100% * 1 / 12);
}
.col-2 {
    width: calc(100% * 2 / 12);
}
.col-3 {
    width: calc(100% * 3 / 12);
}
.col-4 {
    width: calc(100% * 4 / 12);
}
.col-5 {
    width: calc(100% * 5 / 12);
}
.col-6 {
    width: calc(100% * 6 / 12);
}
.col-7 {
    width: calc(100% * 7 / 12);
}
.col-8 {
    width: calc(100% * 8 / 12);
}
.col-9 {
    width: calc(100% * 9 / 12);
}
.col-10 {
    width: calc(100% * 10 / 12);
}
.col-11 {
    width: calc(100% * 11 / 12);
}
.col-12 {
    width: calc(100% * 12 / 12);
}
.col-offset-1 {
    margin-left: calc(100% * 1 / 12);
}
.col-offset-2 {
    margin-left: calc(100% * 2 / 12);
}
.col-offset-3 {
    margin-left: calc(100% * 3 / 12);
}
.col-offset-4 {
    margin-left: calc(100% * 4 / 12);
}
.col-offset-5 {
    margin-left: calc(100% * 5 / 12);
}
.col-offset-6 {
    margin-left: calc(100% * 6 / 12);
}
.col-offset-7 {
    margin-left: calc(100% * 7 / 12);
}
.col-offset-8 {
    margin-left: calc(100% * 8 / 12);
}
.col-offset-9 {
    margin-left: calc(100% * 9 / 12);
}
.col-offset-10 {
    margin-left: calc(100% * 10 / 12);
}
.col-offset-11 {
    margin-left: calc(100% * 11 / 12);
}
/* Main Stylesheet */
 .main-layout {
    background-color: #fff;
    color: #333;
    padding: 3%;
    margin: 1% 0;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}
.btn {
   ...

JavaScript

$(document).ready(function () {
    $("#submit-job").click(function () {
        $("#new-job").slideDown('slow');
    });
});



//Tabs 

$(document).ready(function () {

    $("#tabs").tabs();

});

$(document).ready(function () {

    $("#submit-search").click(function () {
        $("#results").slideDown('slow');
    });

    $("#reset-search").click(function () {
        $("#results").hide();
    });

});

$(document).ready(function () {

    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});


/*
 * Dropit v1.1.0
 * http://dev7studios.com/dropit
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
(function ($) {
    $.fn.dropit = function (method) {
        var methods = {
            init: function (options) {
                this.dropit.settings = $.extend({}, this.dropit.defaults, options);
                return this.each(function () {
                    var $el = $(this),
                        el = this,
                        settings = $.fn.dropit.settings;
                    // Hide initial submenus
                    $el.addClass('dropit')
                        .find('>' + settings.triggerParentEl + ':has(' + settings.submenuEl + ')').addClass('dropit-trigger')
                        .find(settings.submenuEl).addClass('dropit-submenu').hide();
                    // Open on click
                    $el.on(settings.action, settings.triggerParentEl + ':has(' + settings.submenuEl + ') > ' +...