JSFiddle - React, Tailwind, and code Playground

by fedekun

HTML

<div id="rounded"><div id="content">Hello, world!</div></div>

CSS

#rounded {
    background-color: #333;
    padding: 5px;
    color: white;
    display: inline-block;
}

JavaScript

YUI.add('rounded-corners', function(Y) {
    
    function RoundedCorners(config) {
        RoundedCorners.superclass.constructor.apply(this, arguments);
    }
    
    RoundedCorners.NAME = 'rounded-corners';
    
    RoundedCorners.NS = 'NekoCM';     
    
    RoundedCorners.ATTRS = {
        radius : {
            value: 3
        },

        tl : {
            value: true
        },

        tr : {
            value: true
        },

        bl : {
            value: true
        },

        br : {
            value: true
        },

        color: {
            value: null
        },

        bgColor: {
            value: null
        }
    };
    
    Y.extend(RoundedCorners, Y.Plugin.Base, {    
        initializer: function(config) {
            //TODO: Make the change event
            this.onHostEvent('widthChange', function(e){alert('works');});
             
            var host = this.get('host');
            
            /* Blend colors */
            this._getColors();

            var r = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.exec(this.get('color'));
            var red = parseInt(r[1]);
            var green = parseInt(r[2]);
            var blue = parseInt(r[3]);

            var r = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.exec(this.get('bgColor'));
            if(r == null) {
                alert(this.get('bgColor'));
            } else {
                var bgRed = parseInt(r[1]);
                var bgGreen = parseInt(r[2]);
                var bgBlue = parseInt(r[3]);
            }

            var blendRed = red + (Math.abs(red - bgRed) / 2);
            var blendGreen = green + (Math.abs(green - bgGreen) / 2);
            var blendBlue = blue + (Math.abs(blue - bgBlue) / 2);
            var colorBlend = 'rgb('+Math.floor(blendRed)+','+Math.floor(blendGreen)+','+Math.floor(blendBlue)+')';

            var blendRed2 = blendRed + (Math.abs(blendRed - bgRed) / 2);
            var blendGreen2 = blendGreen + (Math.abs(blendGreen...