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);
   });
 });