JSFiddle - React, Tailwind, and code Playground

by fiddlerintheoffice

HTML

<div id="elm" style="border:1px solid black; height:300px; position:relative; overflow:hidden;">
<h1>
Hallo
</h1>
</div>

<div id="elm2" style="border:1px solid black; height:300px; position:relative; display:none;;">
<h1>
Hallo
</h1>
</div>

CSS

#elm:before {
  content:'';
  background-color:#7777ee;
  position:absolute;
  left:-40px; right:0;top:0; bottom:0;
  z-index:-1;
  border-radius:50%;
}

#elm2 {
  background-image:radial-gradient(ellipse, #8888ee 70%, #00000000 70%);

  background-repeat:no-repeat;
  background-position:0 0;
}