JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<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">
<link rel="stylesheet" href="https://edge.xero.com/style/xui/6.2.0/xui.css">
<div id="header"></div>
<div class="container">
    <div class="xui-panel">
        <div class="xui-panel--header">
            <p class="xui-panel--heading">Add Time</p>
        </div>
        <div class="xui-panel--section">
            <div class="xui-inputgroup">
                <label class="xui-inputgroup--label" for="starttime">Start</label>
                <div class="xui-inputgroup--inputs">
                    <input type="text" id="starttime" placeholder="00:00" />
                </div>
            </div>
            <div class="xui-inputgroup">
                <label class="xui-inputgroup--label" for="endtime">End</label>
                <div class="xui-inputgroup--inputs">
                    <input type="text" id="endtime" placeholder="00:00" />
                </div>
            </div>
            <div class="xui-inputgroup">
                <label class="xui-inputgroup--label" for="start"></label>
                <div class="xui-inputgroup--inputs">
                    <input type="button" value="Start" class="xui-button xui-button-create">
                </div>
            </div>
        </div>
        <div class="xui-panel--section">
            <div class="xui-inputgroup">
                <label class="xui-inputgroup--label" for="client">Client</label>
                <div class="xui-inputgroup--inputs">
                    <input type="text" id="client" placeholder="Auckland City Council" />
                </div>
            </div>
            <div class="xui-inputgroup">
                <label class="xui-inputgroup--label" for="job">Job</label>
                <div class="xui-inputgroup--inputs">
                    <input type="text" id="job" placeholder="Recruiretment Program" />
               ...

CSS

body {
    margin: 0;
}

.container {
    margin: 50px;
}

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');