JSFiddle - React, Tailwind, and code Playground

by danielcgold

HTML

<link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>

<ul>
    <li>New Entry</li>
    <li>One Two</li>
    <li>Two Three</li>
    <li>Three</li>
    <li><a href="#">Four</a></li>
    <li>Five Six</li>
    <li>Seven Eight Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>One Two Thee</li>
    <li>One Two</li>
    <li>Two Three</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Six</li>
    <li>Seven Eight Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>One Two Thee</li>
    <li>One Two</li>
    <li>Two Three</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Six</li>
    <li>Seven Eight Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>One Two Thee</li>
    <li>One Two</li>
    <li>Two Three</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Six</li>
    <li>Two Three</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Six</li>
    <li>Seven Eight Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>One Two Thee</li>
    <li>One Two</li>
    <li>Two Three</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Six</li>
    <li>Seven Eight Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>One Two Thee</li>
    <li>One Two</li>
    <li>Two Three</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Six</li>
    <li>Seven Eight Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>One Two Thee</li>
    <li>One Two</li>
    <li>Two Three</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Six</li>
    <li>Seven Eight Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>One Two Thee</li>
    <li>One Two</li>
    <li>Two Three</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Six</li>
    <li>Seven Eight Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>One Two Thee</li>
    <li>One Two</li>
    <li>Two Three</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five Six</li>
    <li>Seven Eight Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>One Two...

CSS

ul { font-family: 'Annie Use Your Telescope', cursive; }
li { font-size: 10px; display: block; float: left; line-height: 30px; color: #bbb; }
li:nth-child(6n + 3) { font-size: 15px; color: red; }
li:nth-child(8n + 6) { font-size: 17px; color: blue; }
li:nth-child(17n + 3) { font-size: 19px; color: yellow; }
li:nth-child(5n + 12) { font-size: 12px; color: purple; }
li:nth-child(16n + 3) { font-size: 25px;  color: green;}
li:nth-child(14n + 10) { font-size: 27px; color: orange; }
li:nth-child(20n + 11) { font-size: 40px; color: maroon; }
li:nth-child(25n + 5) { font-size: 53px; color: burgandy; }
li:nth-child(30n + 9) { font-size: 65px; color: black; }