JSFiddle - React, Tailwind, and code Playground

HTML

<div class="category_header">
  <h2><a href="#">Heading 1</a></h2>
</div>
<div class="single-post">
  <p></p>
</div>
<div class="category_header">
  <h2><a href="#">Heading 2</a></h2>
</div>
<div class="single-post">
  <p></p>
</div>

CSS

.category_header:nth-of-type(odd) {
  background: red;
}
.category_header:nth-of-type(odd) a
{
    
    color:white;
    text-decoration:none;
    padding:5px;
    
}