Glassmorphism Effects Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  .body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  .circle-left {
    height: 1500px;
    width: 1500px;
    left: -750px;
    top: -250px;
  }

  .circle-right {
    height: 1000px;
    width: 1000px;
    left: -500px;
    top: -500px;
  }

  .background-backdrop-filter-small {
    backdrop-filter: blur(4px);
  }

  .background-backdrop-filter-big {
    backdrop-filter: blur(24px);
  }
</style>

<div class="h-screen relative bg-gradient-to-br from-indigo-700 to-purple-500 overflow-hidden">
  <div class="absolute bg-gradient-to-br h-full rounded-full bg-white bg-opacity-30 blur-2xl circle-left"></div>
  <div class="absolute bg-gradient-to-br h-full rounded-full bg-white bg-opacity-30 blur-2xl circle-right"></div>

  <div class="absolute w-72 h-72 bg-red-500 rounded-full z-9 top-1/2 right-1/2 background-backdrop-filter-small"></div>
  <div class="absolute w-72 h-72 bg-yellow-500 rounded-full z-9 bottom-1/2 left-1/2 background-backdrop-filter-small">
  </div>
</div>

<div
  class="absolute w-11/12 md:w-3/6 2xl:w-2/6 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-30 rounded-lg md:p-20 p-10 z-50 background-backdrop-filter-big">
  <h1 class="text-white font-bold text-2xl mb-2">Lorem Ipsum</h1>
  <p class="text-white text-base font-normal">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora suscipit
    doloribus, aut maiores qui, quidem iste commodi quod quasi deleniti ipsum. Et veritatis impedit porro, quod corrupti
    enim dicta eos!</p>
</div>