JSFiddle - React, Tailwind, and code Playground

by Ace Tributon

HTML

<!DOCTYPE html>
<html>
<head>
<style>
*{box-sizing:border-box;margin: 0 auto;}

.under{
  padding:25%;
  background-image: url('https://cdn.discordapp.com/attachments/567924217543131147/572525802168516619/oro.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  font-family:Papyrus;
  text-align:center;
  z-index:1;
}

.grad1 {
  width:100%;
  height:720px;
  padding:5%;
  z-index:0;
  background-position: fixed;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(
    rgba(255,255,255,1) 65%,
    rgba(128,128,128,1) 85%,
    rgba(192,96,48,1) 97%); /* Standard syntax (must be last) */
}

</style>
</head>
<body>

<div id="grad1" class="under">
  <h2 class='grad1'>
    Oros of the Isle!
  </h2>
  <p>
    Site under development!
  </p>
</div>



</body>
<script>
//document.querySelectorAll('.under').forEach(i=>i.innerHTML+=(`|Herro|`.repeat(10)+"<br />").repeat(100));
</script>
</html>