JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="container">
    
    <h1>Advanced Columns w/ CSS</h1>

    <ul class="prodlist">
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logoSOD.png" alt="" title="1" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="2" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="3" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="4" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="5" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="6" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="7" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="8" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="9" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="10" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="11" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="12" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="13" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logoSOD.png" alt="" title="14" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="15" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="16" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="17" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="18" /></a></li>
        <li><a href="#"><img src="http://kuzya.com/_img/logo/logo.png" alt="" title="19"...

CSS

h1 {
    font: 4em normal Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    padding: 20px;
    margin: 0;
}
h1 small{
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    letter-spacing: 1.5em;
    display: block;
}
.container {margin: 0 auto; width: 960px; font-size: 1.2em; }
ul.prodlist {
    margin: 0; padding: 0; 
    list-style: none;
}
ul.prodlist li {
    margin: 10px; padding: 0; 
    float: left;
}
ul.prodlist li img {float: left;}
ul.prodlist li:nth-child(26n+1) {float: right;}
img {border: none;}

JavaScript

$('ul.prodlist li:nth-child(26n+1)').css({
    'float': 'right'
});