JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   <ul id="_blocks"></ul>

CSS

#_blocks li {
            list-style: none;
            margin: 0;
            padding: 3px;
        }

        ._pe_o1._pe_H1 {
            -webkit-transition: opacity .25s ease-in;
            -moz-transition: opacity .25s ease-in;
            transition: opacity .25s ease-in;
        }

        ._pe_s1 ._pe_o1 {
            height: 50px;
            width: 50px;
            font-size: 20px;
            line-height: 50px;
        }

        ._pe_o1 {
            background-color: #a6a6a6;
            color: #fff;
            cursor: pointer;
            speak: none;
            text-align: center;
            text-indent: 0;
            text-shadow: none;
            text-transform: none;
            vertical-align: middle;
            white-space: nowrap;
            word-spacing: 0;
            display: block;
            text-decoration: none;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 27px;
        }

        ._pe_h, ._pe_j {
            margin: 0;
            overflow: hidden;
            vertical-align: top;
            position: relative;
            background-repeat: no-repeat;
            white-space: nowrap;
        }

        ._pe_d, ._pe_h, ._pe_f, ._pe_g {
            display: table-cell;
        }

        ._pe_31 {
            position: relative;
        }

JavaScript

$(document).ready(function () {
            for (var i = 0; i < 100; i++) {
                $("<li/>").addClass("bts")
                           .append($("<span/>").addClass("_pe_h")
                            .append($("<div/>").addClass("nonDraftPart _pe_o1 _pe_H1")
                           .append(i)))
                            .appendTo($("#_blocks"));
            }
            $('.nonDraftPart').each(function () {
                var hue = 'rgb(' + (Math.floor(Math.random()*150) + 50) + ',' + (Math.floor(Math.random()*150) + 50) + ',' + (Math.floor(Math.random()*150) + 50) + ')';
                $(this).css({ "background-color": hue, "background-size": "cover", "background-position": "50% 50%" });
                console.log(hue);
            });
        });