JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-wrapper content-wrapper-smallcols content-wrapper-no-title">
  <div class="wrap">    
    <article class="rp-small-cols">1</article><!--end .rp-small-cols -->
    <article class="rp-small-cols">2</article><!--end .rp-small-cols -->
    <article class="rp-small-cols">3</article><!--end .rp-small-cols -->
    <article class="rp-small-cols">4</article><!--end .rp-small-cols -->
    <article class="rp-small-cols">1</article><!--end .rp-small-cols -->
    <article class="rp-small-cols">2</article><!--end .rp-small-cols -->
    <article class="rp-small-cols">3</article><!--end .rp-small-cols -->
    <article class="rp-small-cols">4</article><!--end .rp-small-cols -->
  </div>
</div>

CSS

.content-wrapper .rp-small-cols:nth-child(1) {
    color: red;
}