JSFiddle - React, Tailwind, and code Playground

by Jim Schwetz

HTML

<section class="a top">
  <article>
    first article in first section class a
  </article>
  <article>
    second article in first sectoin class a
  </article>
 
</section>
<br>
<section class="a">
  <article>
    first article second section class a
  </article>
  <article>
    second article second section class a
  </article>
  <article>
    third article in second section class a
  </article>
 
</section>
<br>
<section class="a">
  <article>
    first article third section class a
  </article>
  <article>
    second article third section class a
  </article>
 
</section>
<br>
<section class="b top">
  <article>
    first article in first section of class b
  </article>
  <article>
    second article in first section of class b
  </article>
 
</section>
<br>
<section class="b">
  <article>
    first article in second section of class b
  </article>
  <article>
    second article in second section of class b
  </article>
 
</section>
<br>
<section class="c top">
  <article>Only one article in class c</article>
</section>
<h2>
I wanted a left and top border for each class.
I wanted a differant color border for each class 
</h2>

CSS

section{
  background-color:yellow;  
  }
.a{border-left:solid blue;}
.b{border-left:solid green;}
.c{border-left:solid red;}

.a.top{border-top:solid blue;}
.b.top{border-top:solid green;}
.c.top{border-top:solid red;}