JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="https://github.dev.xero.com/pages/Style/xui/dist/xui.css">
<script src="https://static.xero.com/header/2.1/scripts/header.min.js"></script>
<link rel="stylesheet" href="https://static.xero.com/header/2.1/stylesheets/all.css">
<div id="header"></div>
<div class="xui-panel">
    <div class="xui-panel-header">
        <p class="xui-heading">Add Time</p>
    </div>
    <div class="xui-panel-section">
        <div class="xui-inputgroup">
            <label class="xui-inputgroup-label" for="starttime">Start</label>
            <input type="text" id="starttime" placeholder="00:00" />
        </div>
        <div class="xui-inputgroup">
            <label class="xui-inputgroup-label" for="endtime">End</label>
            <input type="text" id="endtime" placeholder="00:00" />
        </div>
        <div class="xui-inputgroup">
            <input type="button" value="Start" class="xui-button-action-create">
        </div>
        <div class="xui-inputgroup">
            <label class="xui-inputgroup-label" for="start">or</label>
            <input type="button" value="Start" class="xui-button-action-create">
        </div>
    </div>
    <div class="xui-panel-section">
        <div class="xui-inputgroup">
            <label class="xui-inputgroup-label" for="client">Client</label>
            <input type="text" id="client" placeholder="Auckland City Council" />
        </div>
        <div class="xui-inputgroup">
            <label class="xui-inputgroup-label" for="job">Job</label>
            <input type="text" id="job" placeholder="Recruiretment Program" />
        </div>
        <div class="xui-inputgroup">
            <label class="xui-inputgroup-label" for="task">Task</label>
            <input type="text" id="task" placeholder="Schedule interviews" />
        </div>
        <div class="xui-inputgroup">
            <label class="xui-inputgroup-label">Billable
                <input type="checkbox" name="checkbox" />
            </label>
      ...

CSS

body {
    margin: 0;
}

JavaScript

var config = {
              "colour": "blue",
                  "appMenu": {
                  "type": "Header/AppMenu/SearchableAppMenuDropDown",
                      "model": {
                      "text": "Hornblower Enterprises",
                          "searchPlaceHolder": "Search your organisations",
                          "serviceEndpoint": "http://localhost:8888/demo/data/organisations.json",
                          "myXeroUrl": "#",
                          "highlightMyXeroLink": true,
                          "enableTitle": true
                  }
              }
          };

          XERO.Header.init(config, '#header');