JSFiddle - React, Tailwind, and code Playground

by Saeed Abbaspour

HTML

<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>
<!-- Submit New Job -->
<div id="new-job" class="layout-main">
    <div id="tabs">
        <!-- Tabs Header -->
        <div classs="">
            <ul class="tabs">
                <li class="active"><a href="#tab-1">Search</a>

                </li>
                <li><a href="#tab-2">Purpose</a>

                </li>
                <li><a href="#tab-3">Actions</a>

                </li>
                <li><a href="#tab-4">Output</a>

                </li>
                <li><a href="#tab-5">Review</a>

                </li>
            </ul>
        </div>
        <!-- Search -->
        <div id="tab-1">
            <!-- TMS Object -->
            <input type="radio" name="objectOptions" checked="checked">TMS Objects
            <div>
                <div>By Accession # or Keyword</div>
                <input type="text" class="form-control">
                <div>By Object Package</div>
                <input type="text" class="form-control">
                <div>By Exhibition Title</div>
                <input type="text" class="form-control">
                <br>
                <button type="submit" id="submit-search" class="btn submit">Submit</button>
                <button type="submit" id="reset-search" class="btn process">Reset</button>
                <!-- TMS Search Results -->
                <div id="results" class="search-results" style="display:none">
                    <p><strong>Search Results</strong>

                    </p>
                    <hr>
                    <div class="row">
                        <div class="col-3">Image</div>
                        <div class="col-6">Title</div>
                        <div class="col-3">Add/View</div>
                        <div class="row">
                            <div...

CSS

/* 

	Job Status Color Coding: 

		default: 		#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;
	}
	a {
	    border-bottom: 0px solid;
	}
	a:hover {
	    color: initial;
	    border: none;
	}
	button {
	    border: 0px solid;
	}
	table {
	    width: 100%;
	}
	table tr {
	    border-top: 1px solid #f1f1f1;
	    border-bottom: 1px solid #f1f1f1;
	}
	table th, table td {
	    padding: 1%;
	    vertical-align: middle;
	}
	table th {
	    cursor: pointer;
	}
	form input {
	    width: 100%;
	    margin: 5px 0 10px;
	}
	form input[type="text"], form input[type="password"] {
	    border-radius: 0;
	    border-style: solid;
	    border-color: #f1f1f1;
	    border-width: 1px;
	    box-shadow: none;
	    font-size: 1.5em;
	    color: #666;
	}
	form input[type="text"]:focus, form input[type="password"]:focus {
	    border-color: #66afe9;
	    box-shadow: none;
	    -webkit-transition: all 500ms ease-in;
	    -moz-transition: all 500ms ease-in;
	    -o-transition: all 500ms ease-in;
	    transition: all 500ms ease-in;
	}
	form label {
	    margin-top: 20px;
	}
	/* 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 {
	   ...

JavaScript

$(document).ready(function () {

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

});