JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
        <article></article>
        <article></article>
    </div>
</div>
<div class="articles-row">
    <div class="articles">
       ...

CSS

div div article {
    border: 1px solid black;
    height: 10px;
}

  .articles-row:nth-child(5n-9) .articles article:first-child, .articles-row:nth-child(5n-7) .articles article:last-child {
    background-color: #F0F0F0; }
  .articles-row:nth-child(5n-9) .articles article:last-child, .articles-row:nth-child(5n-6) .articles article:first-child {
    background-color: #E0E0E0; }
  .articles-row:nth-child(5n-8) .articles article:first-child, .articles-row:nth-child(5n-6) .articles article:last-child {
    background-color: #D0D0D0; }
  .articles-row:nth-child(5n-8) .articles article:last-child, .articles-row:nth-child(5n-5) .articles article:first-child {
    background-color: #C0C0C0; }
  .articles-row:nth-child(5n-7) .articles article:first-child, .articles-row:nth-child(5n-5) .articles article:last-child {
    background-color: #B0B0B0; }