JSFiddle - React, Tailwind, and code Playground

by ajthomascouk

HTML

<h2>Before</h2>
<ul>
    <li>1. This is a tweet #1</li>
    <li>2. This is a tweet #2</li>
    <li>3. This is a tweet #3</li>
    <li>4. This is a tweet #4</li>
    <li>5. This is a tweet #5</li>
</ul>
<h2>After</h2>

CSS

h2{font-size:150%; margin:20px 0 10px; border-bottom:1px solid #ddd;}
ul{width:450px;}
li{width:380px; background-color:#eee; margin-bottom:10px; border:1px solid #555; padding:5px;}

JavaScript

output = '<ul id="after">';
$($("li").get().reverse()).each(function() {
    output += '<li>'+$(this).text()+'</li>';
});

$('body').append(output+'</ul>');

$("#after li:even").css({"float":"left", "clear":"right"});
$("#after li:odd").css({"float":"right", "clear":"left"});

$("#after li:nth-child(2)").css({"width":"320px", "font-size":"90%"});
$("#after li:nth-child(3)").css({"width":"260px", "font-size":"80%"});
$("#after li:nth-child(4)").css({"width":"180px", "font-size":"70%"});
$("#after li:nth-child(5)").css({"width":"100px", "font-size":"60%"});