JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css">
<div id="w" class="ui-widget">
    <input class="i"><div style="float:right"><a class="b">&gt;</a></div>

</div>

CSS

body {
    font-size: 100%
}

.i {
    margin: 0;
    padding: 0.4em;
}
.b {
    margin: 0;
    padding: 0;
}

#w {
    position: absolute;
    left: 50px;
    top: 50px;
}

JavaScript

$(".i").addClass("text ui-widget ui-widget-content ui-corner-left");
$(".b").button({
    icons: {
        primary: "ui-icon-carat-1-e"
    },
    text: false
}).removeClass("ui-corner-all").addClass("ui-corner-right");