JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div class="primarybg">
  <p>
    My name is Donald</p>
  <p>I live in Ducksburg</p>

  <p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>
</div>
<div class="content">
  Content goes here and now it's shown
</div>

CSS

div {
  color: #fff;
}

p {
  max-width: 70%;
}

.primarybg::before {
  content: " ";
  width: 200%;
  height: 200%;
  background-color: #255EA9;
  color: red;
  display: block;
  font-weight: bold;
  white-space: pre;
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  top: -130%;
  left: -90%;
}

.primarybg::after {
  content: " ";
  width: 200%;
  height: 200%;
  background-color: lightblue;
  color: red;
  display: block;
  font-weight: bold;
  white-space: pre;
  position: fixed;
  z-index: -2;
  border-radius: 50%;
  top: -132%;
  left: -80%;
}