JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<section class="liner red-text border">
  <div class="liner content border purple-filter">
    <h1 class="red-header border">
    Heading
    </h1>
    <p>
    Hello there
    </p>
  </div>
</section>

CSS

.border {
  border: solid 1px black;
}
.liner {
  padding: 0.3rem;
}

.liner .liner { /* Specificity that prevents "double"-padding on nested liner elements*/
  padding: 0rem;
}

.red-text {
  color: red;
}

.red-text .red-header {
  color: black;
}

.red-header {
  background-color: red;
  display: block;
}

h1 {
  margin-top: 0;
}

.purple-filter {
  position: relative;
  
  background-color: rgba(0, 0, 200, .2);
}