JSFiddle - React, Tailwind, and code Playground

by Emmanuel Ndubuisi

HTML

<!-- RED CONTAINER -->
<div class="red-background">
  <p>Hello, look at my red background</p>
</div>
<!-- RED CONTAINER -->

<!-- ORANGE CONTAINER -->
<div class="orange-background">
  <p>Hello, look at my orange background</p>
</div>
<!-- ORANGE CONTAINER -->

<!-- YELLOW CONTAINER -->
<div class="yellow-background">
  <p>Hello, look at my yellow background</p>
</div>
<!-- YELLOW CONTAINER -->

<!-- BLUE CONTAINER -->
<div class="blue-background">
  <p>Hello, look at my blue background</p>
</div>
<!-- BLUE CONTAINER -->

<!-- GREEN CONTAINER -->
<div class="green-background">
  <p>Hello, look at my green background</p>
</div>
<!-- GREEN CONTAINER -->

<!-- INDIGO CONTAINER -->
<div class="indigo-background">
  <p>Hello, look at my indigo background</p>
</div>
<!-- INDIGO CONTAINER -->

<!-- VIOLET CONTAINER -->
<div class="violet-background">
  <p>Hello, look at my violet background</p>
</div>
<!-- VIOLET CONTAINER -->

CSS

body {
  color: white;
}

.red-background {
  background-color:  red;
}

.orange-background {
  background-color:  orange;
}

.yellow-background {
  background-color:  yellow;
}

.green-background {
  background-color:  green;
}

.blue-background {
  background-color:  blue;
}

.indigo-background {
  background-color:  indigo;
}

.violet-background {
  background-color:  violet;
}