JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport" />
<div id="wrapper">
    <ul></ul>
</div>

CSS

*{box-sizing:border-box;margin:0px;padding:0px}
li{list-style-type:none;-webkit-flex: 1 auto;border-radius: .25rem;}
ul{display: -webkit-flex;-webkit-flex-flow: column nowrap;-webkit-overflow-scrolling:touch;width:320px;height:460px;border:1px solid grey;overflow:scroll;}
ul li{display: -webkit-inline-flex;
position: relative;
-webkit-justify-content: center;
margin: .25rem;
font-size: 1.5em;
overflow: hidden;
display: inline-block;
padding: 1rem 1.5rem;
-webkit-align-self: center;
    width: 90%;
text-align: center;
opacity: 0.7;
    line-height:0px;
}

JavaScript

lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu dolor nibh. Mauris vulputate magna ac purus placerat, sed rutrum nunc interdum. Sed vitae imperdiet nisi. Phasellus ultricies sollicitudin mauris. Nunc eget orci volutpat, blandit nunc sit amet, tincidunt nulla. Nullam odio libero, venenatis ut placerat ut, mollis vel turpis. Nulla tempor lorem quis auctor tincidunt. Curabitur cursus quam enim, in vulputate diam pellentesque vel. Sed ullamcorper ligula facilisis eros commodo, et dignissim nunc fermentum. Pellentesque mattis, elit scelerisque sollicitudin rhoncus, orci sem commodo metus, non vestibulum dui orci sed metus. Aenean non turpis ut mi venenatis ultricies. Cras commodo volutpat leo, euismod volutpat turpis. Duis iaculis varius porta. Mauris convallis id enim vel consectetur. In viverra libero non eros laoreet eleifend. Sed ut metus vel metus blandit blandit ut ac risus. Praesent blandit, eros non luctus porttitor, orci quam ultrices leo, sit amet elementum elit arcu non nunc. In adipiscing hendrerit tempor. Aliquam rutrum commodo orci non cursus. Proin nibh quam, mollis non lectus non, condimentum sollicitudin odio. Sed vitae lorem tincidunt, auctor leo at, volutpat diam. Pellentesque sit amet rhoncus dui, eget tincidunt risus. Donec interdum velit sit amet lorem fermentum, sed volutpat felis condimentum. Etiam placerat, lacus.";
arr = lorem.match(/\w+/g);
$(document).ready(function(){
    var html = '';
    for(i=0;i<arr.length;i++){
        var li_markup = $('<li />');
        li_markup[0].contentEditable = true;
        li_markup.text(arr[i]);
        li_markup.css('background','hsl('+i+',100%,50%)');
        html += li_markup[0].outerHTML;
    }
    $("#wrapper ul").html(html);
})