JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<html class=" -webkit-"><head><meta charset="UTF-8"><script src="/javascripts/libs/prefixfree.min.js" type="text/javascript"></script>        
        <script type="text/javascript" style="display: none !important;">        function cleanJS(js) {          js = js.replace(/location(s+)?=/mi, '');          js = js.replace(/top.location.+=('|")/mi, '');          js = js.replace(/location.replace/mi, '');          js = js.replace(/.submit()/mi, '');          js = js.replace(/fromCharCode/mi, '');          return js;        }        _ogEval        = window.eval;        window.eval    = function(text) {_ogEval(cleanJS(text));};        window.confirm = function(){};        window.prompt  = function(){};        window.open    = function(){};        window.print   = function(){};        window.innerWidth = window.outerWidth; // Fixes browser bug with it innerWidth report 0        // Support hover state for mobile.        window.ontouchstart = function(){};        </script>
<link rel="stylesheet" href=""><style>/* Use your mouse/touch to move the lines. */</style><style type="text/css">.dg ul{list-style:none;margin:0;padding:0;width:100%;clear:both}.dg.ac{position:fixed;top:0;left:0;right:0;height:0;z-index:0}.dg:not(.ac) .main{overflow:hidden}.dg.main{-webkit-transition:opacity 0.1s linear;-o-transition:opacity 0.1s linear;-moz-transition:opacity 0.1s linear;-webkit-transition:opacity 0.1s linear}.dg.main.taller-than-window{overflow-y:auto}.dg.main.taller-than-window .close-button{opacity:1;margin-top:-1px;border-top:1px solid #2c2c2c}.dg.main ul.closed .close-button{opacity:1 !important}.dg.main:hover .close-button,.dg.main .close-button.drag{opacity:1}.dg.main .close-button{-webkit-transition:opacity 0.1s linear;-o-transition:opacity 0.1s linear;-moz-transition:opacity 0.1s linear;-webkit-transition:opacity 0.1s linear;border:0;position:absolute;line-height:19px;height:20px;cursor:pointer;text-align:center;background-color:#000}.dg.main...