JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="http://127.0.0.1:8080/globalsearch.css">
<script src="http://127.0.0.1:8080/globalsearch.js"></script>
<!-- is this a hybrid card/search result? -->
<div class="x-globalsearch">
    <div class="x-globalsearch-bd">
        <div class="x-globalsearch-card-hd">
             <h2>
      <!-- TODO: back link -->
      <!-- TODO: center align -->
      Enter Time
      <!-- jobsList -->
  </h2>

        </div>
        <div class="x-globalsearch-rib"></div>
        <div class="x-globalsearch-card-bd">
            <div class="x-globalsearch-resultlist x-globalsearch-scrollbar">
                <div class="x-globalsearch-resultlist-bd">
                    <div class="x-globalsearch-result">
                        <div class="x-globalsearch-result-bd">
                            <div class="x-globalsearch-row x-globalsearch-navigable x-globalsearch-result-row"> <a href="#">Adhoc Job</a>

                            </div>
                        </div>
                        <div class="x-globalsearch-section-title"><strong>Active Jobs</strong> (5)</div>
                        <div class="x-globalsearch-result-bd">
                            <div class="x-globalsearch-row x-globalsearch-result-row x-globalsearch-transaction-row"> <a href="#">J00178 - Annual Accounts - Family Trust</a>

                            </div>
                            <div class="x-globalsearch-row x-globalsearch-result-row x-globalsearch-transaction-row"> <a href="#">J00099 - Annual Accounts - FY13</a>

                            </div>
                            <div class="x-globalsearch-row x-globalsearch-result-row x-globalsearch-transaction-row"> <a href="#">J00052 - ASIC Template</a>

                            </div>
                            <div class="x-globalsearch-row x-globalsearch-result-row x-globalsearch-transaction-row"> <a href="#">J00047 - Xero Setup / Conversion</a>

                            </div>
                            <div...

CSS

.x-globalsearch {
    position: relative;
    margin-top: 20px;
}

.calculated {
    display: inline-block;
    text-align: right;
    width: 124px;
}

JavaScript

// From http://jsfiddle.net/wrumsby/dwRcw/

(function () {
    'use strict';

}());