JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<div class="metabox-holder" id="dd-custom-branding-metabox">
    <h3>Configure custom admin header</h3>

    <div class="single-option">
        <label for="header_background_colour">Background colour -</label>
        <input type="text" value="" name="branding[header_background_colour]" class="colour-picker" id="header_background_colour">
    </div>
    <div class="single-option">
        <label for="header_text_colour">Text colour -</label>
        <input type="text" value="" name="branding[header_text_colour]" class="colour-picker" id="header_text_colour">
    </div>
    <div class="single-option">
        <label for="header_height">Height -</label>
        <input id="header_height" class="small" type="text" value="" name="branding[header_height]">
    </div>
</div>

CSS

#dd-custom-branding-metabox h3{
    border-bottom: 1px solid #000000;
	font-style: italic;
	font-weight: bold;
	margin: 7px 0 17px 0;
	padding: 0 0 2px 0;
}

#dd-custom-branding-metabox .single-option {
    margin-bottom: 10px;
}
#dd-custom-branding-metabox .single-option label {
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 15px;
    width: 120px;
}
#dd-custom-branding-metabox .single-option input[type="text"] {
    margin-left: 10px;
}
#dd-custom-branding-metabox .single-option input[type="text"].small {
    width: 50px;
}
#dd-custom-branding-metabox .iris-picker {
    position: absolute;
    z-index: 99999;
}

JavaScript

/*! Iris Color Picker - v1.0.3 - 2013-02-15
 * https://github.com/Automattic/Iris
 * Copyright (c) 2013 Matt Wiebe; Licensed GPLv2 */ (function (e, t) {
    function c() {
        var t, n;
        r ? i = "filter" : (t = e('<div id="iris-gradtest" />'), n = "linear-gradient(top,#fff,#000)", e.each(s, function (e, r) {
            t.css("backgroundImage", r + n);
            if (t.css("backgroundImage").match("gradient")) return i = e, !1
        }), i === !1 && (t.css("background", "-webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#000))"), t.css("backgroundImage").match("gradient") && (i = "webkit")), t.remove())
    }
    function h(t, n) {
        return t = t === "top" ? "top" : "left", n = e.isArray(n) ? n : Array.prototype.slice.call(arguments, 1), i === "webkit" ? d(t, n) : s[i] + "linear-gradient(" + t + ", " + n.join(", ") + ")"
    }
    function p(t, n) {
        var r, i, s, o, u, a, f, l, c;
        t = t === "top" ? "top" : "left", n = e.isArray(n) ? n : Array.prototype.slice.call(arguments, 1), r = t === "top" ? 0 : 1, i = e(this), s = n.length - 1, o = "filter", u = r === 1 ? "left" : "top", a = r === 1 ? "right" : "bottom", f = r === 1 ? "height" : "width", l = '<div class="iris-ie-gradient-shim" style="position:absolute;' + f + ":100%;" + u + ":%start%;" + a + ":%end%;" + o + ':%filter%;" data-color:"%color%"></div>', c = "", i.css("position") === "static" && i.css({
            position: "relative"
        }), n = v(n), e.each(n, function (e, t) {
            var i, o, u;
            if (e === s) return !1;
            i = n[e + 1];
            if (t.stop === i.stop) return;
            o = 100 - parseFloat(i.stop) + "%", t.octoHex = (new Color(t.color)).toIEOctoHex(), i.octoHex = (new Color(i.color)).toIEOctoHex(), u = "progid:DXImageTransform.Microsoft.Gradient(GradientType=" + r + ", StartColorStr='" + t.octoHex + "', EndColorStr='" + i.octoHex + "')", c += l.replace("%start%", t.stop).replace("%end%", o).replace("%filter%", u)
       ...