JSFiddle - React, Tailwind, and code Playground

by pramendra

HTML

<html>
    <head></head>
    <body>
        <div class="yui3-g">
            <div class="yui3-u-1" style="background:#ccc;">
                yui2-u-1 is 100%
            </div>
        </div>
        <div class="yui3-g">
            <div class="yui3-u-1-2" style="background:#f00;">
                this is 50%
            </div>
            <div class="yui3-u-1-2" style="background:#ff0;">
                this is 50%
            </div>
        </div>
        <hr>
        <div class="yui3-g">
            <div class="yui3-u-1-4" style="background:#f00;">
                this is 25%
            </div>
            <div class="yui3-u-3-4" style="background:#ff0;">
                this is 75%
            </div>
        </div>
        <hr>
        <div class="yui3-g">
            <div class="yui3-u-1-3" style="background:#f00;">
                this is 33.33%
            </div>
            <div class="yui3-u-1-3" style="background:#ff0;">
                this is 33.33%
            </div>
            <div class="yui3-u-1-3" style="background:#f0f;">
                this is 33.33%
            </div>
        </div>
        <hr>
        <div class="yui3-g" style="width:300px;">
            <div class="yui3-u-1-3" style="background:#f00;">
                this is 33.33%
            </div>
            <div class="yui3-u-1-3" style="background:#ff0;">
                this is 33.33%
            </div>
            <div class="yui3-u-1-3" style="background:#f0f;">
                this is 33.33%
            </div>
        </div>
        <hr>
        <div class="yui3-g">
            <div class="yui3-u" style="background:#f00; width:100px;">
                this is 100px
            </div>
            <div class="yui3-u" style="background:#ff0; width:210px;">
                this is 210px
            </div>
            <div class="yui3-u" style="background:#f0f; width:320px;">
                this is 320px
            </div>
        </div>
    </body>
    
</html>

CSS

/*
Author: Pramendra K Gupta
Version: 1.1
Tags: html5, yui3, less
*/
body {font:13px/1.231 arial, helvetica, clean, sans-serif;*font-size:small;*font:x-small;}select, input, button, textarea { font:99% arial, helvetica, clean, sans-serif; }table {font-size:inherit;font:100%;}pre, code, kbd, samp, tt {font-family:monospace;*font-size:108%;line-height:100%;}html {color:#000000;background:#ffffff;}body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing:0;}fieldset, img { border:0; }address, caption, cite, code, dfn, em, strong, th, var {font-style:normal;font-weight:normal;}li { list-style:none; }caption, th { text-align:left; }h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;}q:before, q:after { content:''; }abbr, acronym {border:0;font-variant:normal;}sup { vertical-align:text-top; }sub { vertical-align:text-bottom; }input, textarea, select {font-family:inherit;font-size:inherit;font-weight:inherit;}input, textarea, select { *font-size:100%; }legend { color:#000000; }.yui3-g {letter-spacing:-0.31em;*letter-spacing:normal;word-spacing:-0.43em;}.yui3-u, .yui3-u-1, .yui3-u-1-2, .yui3-u-1-3, .yui3-u-2-3, .yui3-u-1-4, .yui3-u-3-4, .yui3-u-1-5, .yui3-u-2-5, .yui3-u-3-5, .yui3-u-4-5, .yui3-u-1-6, .yui3-u-5-6, .yui3-u-1-8, .yui3-u-3-8, .yui3-u-5-8, .yui3-u-7-8, .yui3-u-1-12, .yui3-u-5-12, .yui3-u-7-12, .yui3-u-11-12, .yui3-u-1-24, .yui3-u-5-24, .yui3-u-7-24, .yui3-u-11-24, .yui3-u-13-24, .yui3-u-17-24, .yui3-u-19-24, .yui3-u-23-24 {display:inline-block;zoom:1;*display:inline;letter-spacing:normal;word-spacing:normal;vertical-align:top;}.yui3-u-1 { display:block; }.yui3-u-1-2 { width:50%; }.yui3-u-1-3 { width:33.33333%; }.yui3-u-2-3 { width:66.66666%; }.yui3-u-1-4 { width:25%; }.yui3-u-3-4 { width:75%; }.yui3-u-1-5 { width:20%; }.yui3-u-2-5 { width:40%; }.yui3-u-3-5 { width:60%; }.yui3-u-4-5 { width:80%; }.yui3-u-1-6 {...