JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<ul>
    <li>one item</li>
</ul>
<ul>
    <li>two items</li>
    <li>two items</li>
</ul>
<ul>
    <li>three items</li>
    <li>three items</li>
    <li>three items</li>
</ul>
<ul>
    <li>four items</li>
    <li>four items</li>
    <li>four items</li>
    <li>four items</li>
</ul>

CSS

/* one item */
 li:first-child:nth-last-child(1) {
    margin-left: 0px;
}
/* two items */
li:first-child:nth-last-child(2) ~ li {
    margin-left: 0px;
}
/* three items */
li:first-child:nth-last-child(3) ~ li {
    margin-left: 0px;
}
/* four items */
li:first-child:nth-last-child(4) ~ li {
    margin-left: 0px;
}

 li:first-child:nth-last-child(4) {
     margin-left:10px;
    color:red;
 }

 li:first-child:nth-last-child(3) {
     margin-left:20px;
    color:green;
 }

 li:first-child:nth-last-child(2) {
     margin-left:30px;
    color:blue;
 }

 li:first-child:nth-last-child(1) {
     margin:40px;
     color:gray;
 }