JSFiddle - React, Tailwind, and code Playground

by Tenphi

HTML

<script src="http://utoria.googlecode.com/files/utoria.0.10.0.js"></script>
<script src="http://utoria.googlecode.com/files/utoria.css.0.2.1.js"></script>
<script src="http://utoria.googlecode.com/files/utoria.color.0.2.2.js"></script>
<script src="http://utoria.googlecode.com/files/uapp.init.0.0.1.js"></script>
<span></span>

JavaScript

(function(_, $) {
    
    if (!_.color) return _.log('UtoRIA Color Plugin required.', 3);
    
    _.define('UApp.Button', {
        
        view: ['span'],
        
        styles: {
            
            '': {
                borderRadius: '5px 5px 5px 5px',
                borderStyle: 'solid',
                borderWidth: '1px',
                cursor: 'pointer',
                display: 'inline-block',
                font: _.baseFont,
                fontWeight: 'normal',
                margin: '0 2px 20px 0',
                overflow: 'visible',
                padding: '4px 10px',
                textDecoration: 'none',
                textAlign: 'center',
                color: '#333',
                backgroundColor: '#fafafa',
                backgroundRepeat: 'no-repeat',
                boxShadow: '0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05)',
                ':hover|.hover': {
                    transition: 'background-position 0.1s linear',
                    textDecoration: 'none',
                    backgroundPosition: '0 -15px'
                },
                ':active|.active': {
                    linearGradient: 'none',
                    boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05)',
                    color: 'rgba(0, 0, 0, 0.5)',
                    outline: 'none'
                },
                ':disabled|.disabled': {
                    opacity: '0.75'
                },
                '.button-dark': {
                    borderColor: 'rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)',
                    color: '#fff',
                    '.active': {
                        color: 'rgba(255, 255, 255, 0.75)'
                    }
                },
                
                '.button-light': {
                    borderColor: '#cccccc #cccccc #bbbbbb',
                    color: '#333',
                    '.active': {
                       ...