JSFiddle - React, Tailwind, and code Playground

by bseth99

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<div class="controls">
 <span class="nm size1"><input /></span>
 <span class="nm size2"><input /></span>
</div>

<div class="controls">
 <span class="ib size1"><input /></span>
 <span class="ib size2"><input /></span>
 <span class="ib size3"><input /></span>
</div>
  
<div class="controls">
 <div class="ib size2"><input /></div>
 <div class="ib size3"><input /></div>
</div>

CSS

.controls { margin: 5px; }

.nm { margin: 3px; }   
.ib { display: inline-block; margin: 3px; }   

input { width: 3em; }    

.size1 input { font-size: 8pt; }
.size2 input { font-size: 14pt; }
.size3 input { font-size: 16pt; }

/* Uncomment to fix clipping */
/* .ui-spinner { overflow: visible; } */

JavaScript

$('input').spinner();