JSFiddle - React, Tailwind, and code Playground

by Jake

HTML

<article
  class="card x section box | bg-base color-primary"
  data-state="reversed"
>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Idque Caesaris facere voluntate liceret: sese habere. Quis aute iure reprehenderit in voluptate velit esse. Quam temere in vitiis, legem sancimus haerentia. Praeterea iter est quasdam res quas ex communi.</article>

CSS

article {
  background: red;
}

article.card {
  padding: 2em;
}

article.x {
  background: blue;
}