Beautiful Hero Section 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;
  }
</style>

<section
  class="relative pt-20 pb-12 overflow-hidden bg-gradient-to-b from-blue-50 via-transparent to-transparent sm:pb-16 sm:pt-32 lg:pb-24"
>
  <div class="relative z-10">
    <div
      class="absolute inset-x-0 top-1/2 -z-10 flex -translate-y-1/2 justify-center overflow-hidden [mask-image:radial-gradient(50%_45%_at_50%_55%,white,transparent)]"
    >
      <svg
        class="h-[60rem] w-[100rem] flex-none stroke-blue-600 opacity-20"
        aria-hidden="true"
      >
        <defs>
          <pattern
            id="e9033f3e-f665-41a6-84ef-756f6778e6fe"
            width="200"
            height="200"
            x="50%"
            y="50%"
            patternUnits="userSpaceOnUse"
            patternTransform="translate(-100 0)"
          >
            <path d="M.5 200V.5H200" fill="none"></path>
          </pattern>
        </defs>
        <svg x="50%" y="50%" class="overflow-visible fill-blue-50">
          <path
            d="M-300 0h201v201h-201Z M300 200h201v201h-201Z"
            stroke-width="0"
          ></path>
        </svg>
        <rect
          width="100%"
          height="100%"
          stroke-width="0"
          fill="url(#e9033f3e-f665-41a6-84ef-756f6778e6fe)"
        ></rect>
      </svg>
    </div>
  </div>
  <div class="relative z-20 w-full mx-auto">
    <div
      class="flex flex-col items-end mx-auto text-center sm:flex-row max-w-7xl sm:text-start sm:px-6 lg:px-2"
    >
      <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
        ENGINEERING A NEW GENERATION OF THERAPEUTICS
      </h1>
      <h2 class="px-4 mt-6 text-lg leading-8 text-gray-600">
        Our therapeutics are the result of integrating several layers of
        information, from single point mutations in protein sequence, through
        3-dimensional conformational changes of protein structure, to systematic
        changes in protein gene expression
      </h2>
    </div>
    <div class="relative mx-auto mt-16">
      <img
        class="object-cover w-full border border-gray-100 shadow h-96"
        src="https://images.unsplash.com/photo-1659249763565-83ffdba45005?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDh8Q0R3dXdYSkFiRXd8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
        alt=""
      />
    </div>
  </div>
</section>