JSFiddle - React, Tailwind, and code Playground

by lucaslazaro

HTML

<section class="container">
    <article class="flex-parent">
        <p>This is text in flex-parent (odd)</p>
    </article>

    <article class="flex-parent">
        <p>This is text in flex-parent (even)</p>
    </article>

    <article class="flex-parent">
        <p>This is text in flex-parent (odd)</p>
    </article>
</section>

SCSS

.container{
    max-width:1000px;
    margin:0 auto;
}

.flex-parent{
    border:1px solid blue;
    position:relative;

  &:after {
    content:"";
    position:absolute;
    height:100%;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:100vw;
    z-index:-1;
    background:yellow;
  }
  
  &:nth-of-type(odd)::after{
    background-color:orange ;
  }

  &:nth-of-type(even)::after{
    background-color:red;
  } 
}