JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/bseth99/jquery-ui-extensions/master/dist/ext-jquery-ui.min.css">
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/bseth99/jquery-ui-extensions/master/dist/ext-jquery-ui.min.js"></script>
<input type="text" class="qit">

CSS

.ui-spinner-horizontal a.ui-spinner-button {
    width: 30px;
    border: 1px solid #e1e1e1;
    height: 25px;
    display: inline-block;
    cursor: pointer;
    margin-top: 3px;
}
.ui-spinner-horizontal a.ui-spinner-button:hover {
    border-color: #33B1C0;
}
.ui-spinner-horizontal .ui-spinner-button.ui-corner-right.ui-button {
    border-radius: 0 5px 5px 0;
}
.ui-spinner-horizontal .ui-spinner-button.ui-corner-right.ui-button:active {
    border-color:#9BC225;
}
.ui-spinner-horizontal .ui-spinner-button.ui-corner-left.ui-button {
    border-radius: 5px 0 0 5px;
}
.ui-spinner-horizontal .ui-spinner-button.ui-corner-left.ui-button:active {
    border-color:#FF5253;
}
input.qit.ui-spinner-input {
    height: 25px;
    width: 38px;
    border: 1px solid #e1e1e1;
    margin-left: 31px;
    margin-right: 31px;
    outline: none;
}
input.qit.ui-spinner-input:focus {
    background-color:#e6f2c4;
}
.ui-spinner-horizontal .ui-spinner-down {
    left: 0px;
    border-right: none!important;
}
.ui-spinner-horizontal .ui-spinner-up {
    right: 0px;
    border-left: none !important;
}
span.ui-icon.ui-icon-triangle-1-e, span.ui-icon.ui-icon-triangle-1-w {
    width: 30px;
    height: 25px;
    position: absolute;
    top: 0;
    margin: 0;
    left: 0;
    background-color: #fff;
    font-size: 20px;
    font-weight: bold;
}
span.ui-icon.ui-icon-triangle-1-e:hover, span.ui-icon.ui-icon-triangle-1-w:hover {
    background-color: #33B1C0;
    color : #fff;
}
span.ui-icon.ui-icon-triangle-1-w:active {
    background-color:#FF5253;
}
span.ui-icon.ui-icon-triangle-1-e:active {
    background-color:#9BC225;
}

JavaScript

(function ($) {
    $('input.qit').spinner({
        alignment: 'horizontal'
    });
    $('.ui-spinner-horizontal .ui-icon-triangle-1-w').html('&#x2012;');
    $('.ui-spinner-horizontal .ui-icon-triangle-1-e').html('+');
})(jQuery);