JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<pre>var fifty_shades_of_grey = (function() {

    var createElement = function(shade) {
        return $(&#39;&lt;div class=&quot;shade&quot; style=&quot;background:rgba(0,0,0,&#39; + shade + &#39;)&quot;&gt;&lt;/div&gt;&#39;);
    };

    var init = function() {
        var amt = 50, i;
        for(i=0; i&lt;amt; i++){
            $(&#39;body&#39;).append(createElement((amt-i)/amt));
        }
    };

    init();

})();</pre>

CSS

html, body{
    height:100%;
    margin:0;
    padding:0;
}
.shade{
    width:100%;
    height:2%;
}
pre{
    position:absolute;
    margin:0 auto;
    color:#666;
    background:rgba(0,0,0,0.1);
    padding:10px;
    
  -webkit-transition: color 1s ease; 
     -moz-transition: color 1s ease; 
       -o-transition: color 1s ease; 
          transition: color 1s ease; 

}
pre:hover{
    color:#fefefe;
}

JavaScript

var fifty_shades_of_grey = (function() {

    var createElement = function(shade) {
        return $('<div class="shade" style="background:rgba(0,0,0,' + shade + ')"></div>');
    };

    var init = function() {
        var amt = 50, i;
        for(i=0; i<amt; i++){
            $('body').append(createElement((amt-i)/amt));
        }
    };

    init();

})();