G.html

<div id="ROOT">
<header>
  <h2 class="font-light text-2xl md:text-4xl text-gray-600">Ancient Wisdom</h2>
</header>
<div class="mt-8">
  <img src="blurred.jpg" alt="" class="absolute" width=1464>
  <div class="bg-white rounded-md overflow-hidden shadow-xl relative">
    <img src="portrait.jpg" alt="" width="512" height="512" class="">
    <div class="">
      <p class="font-semibold italic text-base text-gray-600">“A wise man speaks because he has something to say; a fool because he has to say something.”</p>
      <p class="font-light text-gray-400">— Plato</p>
    </div>
  </div>
  <div class="flex md:justify-end justify-center gap-4 md:gap-6">
    <div class="rounded-md py-2 px-4 font-semibold text-base cursor-pointer">New quote</div>
  </div>
</div>
</div>

<div class="flex items-center justify-center pt-10 px-10" id="ROOT">
<header>
  <h1 class="text-center font-light text-2xl md:text-4xl text-gray-600">Ancient Wisdom</h1>
</header>
<div class="my-8 md:my-12">
  <img alt="" class="absolute" width=1464>
  <div class="md:container md:w-3/4 lg:w-1/2 md:mx-auto flex bg-white rounded-lg overflow-hidden shadow-xl">
    <img alt="" width="512" height="512" class="object-cover h-auto w-1/2">
    <div class="m-4 w-1/2">
      <span class="font-semibold italic text-base text-gray-600">“A wise man speaks because he has something to say; a fool because he has to say something.”</span>
      <span class="block text-lg font-light text-gray-400">— Plato</span>
    </div>
  </div>
  <div class="flex pt-8 md:pt-12 md:justify-end justify-center">
    <div class="rounded-lg text-white bg-[#75798d] hover:bg-[#a4a7b4] focus:ouline-none focus:ring-0 py-2 px-4 font-semibold text-base cursor-pointer shadow-lg">New quote</div>
  </div>
</div>
</div>

<div class="flex flex-col items-center justify-center min-h-screen p-10">
  <h1 class="text-4xl font-bold mb-8 md:mb-12">Title</h1>
  <div class="relative w-full md:w-3/4 lg:w-1/2">
  <div class="bg-gray-200 p-4 rounded-lg">
    <p>Container</p>
  </div>
  <div class="flex justify-center mt-4 md:mt-8 md:absolute md:right-0">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>
  </div>
  </div>
</div>

<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
  <img src="blurred.jpg" alt="" class="absolute top-1/2 left-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1464" />
  <header class="relative pb-8">
    <h2 class="font-light text-center text-2xl md:text-4xl text-gray-600">Ancient Wisdom</h2>
  </header>
  <div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
    <div class="mx-auto max-w-md">
      <img src="/img/logo.svg" class="h-6" alt="Tailwind Play" />
      <div class="divide-y divide-gray-300/50">
        <div class="space-y-6 py-8 text-base leading-7 text-gray-600">
          <p>An advanced online playground for Tailwind CSS, including support for things like:</p>

          <p>Perfect for learning how the framework works, prototyping a new idea, or creating a demo to share online.</p>
        </div>
        <div class="pt-8 text-base font-semibold leading-7">
          <p class="text-gray-900">Want to dig deeper into Tailwind?</p>
          <p>
            <a href="https://tailwindcss.com/docs" class="text-sky-500 hover:text-sky-600">Read the docs &rarr;</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>