Generate high quality images automatically

<div class="p-8 space-y-6 bg-gradient-to-b from-sky-700 to-sky-950 font-sans" style="width: 640px">
  <p class="text-center text-2xl text-gray-200 font-bold">
    This is Oliver Fluffington &mdash; he's a delightful little floof
  </span>
  <div>
    <img class="object-cover rounded-[50%] mx-auto border-2 border-sky-800 h-64 w-48" src="https://imagedelivery.net/77cF_qbJPexQSI5RB1efIA/4cae41d1-97fa-46fe-ea3f-89503cbefd00/public">
  </div>
  <div class="flex justify-center mx-auto">
    <span class="text-xl text-white inline-flex items-center gap-2 hightlight">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
        <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
      </svg>
      @cpt_oliver_fluffington
    </span>
  </div>
</div>

<!-- Include and embed CSS, JavaScript or Font assets -->
<link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>tailwind.config = { theme: { fontFamily: { sans: ['Urbanist'] } } };</script>
<style type="text/css">
  .hightlight {
    position: relative;
    z-index: 1;
  }
  .hightlight:before {
    background-color: #047857;
    content: "";
    position: absolute;
    height: 60%;
    left: -6px;
    right: -6px;
    bottom: 0;
    z-index: -1;
    transform: rotate(-2deg);
    border-radius: 8px;
  }
</style>