<div class="py-8 px-8 max-w-sm mx-auto mt-12 bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="https://thispersondoesnotexist.com/image" alt="Woman's Face">
<div class="text-center space-y-2 sm:text-left">
<div class="space-y-0.5">
    <p class="text-lg text-black font-semibold">
    Erin Lindford
    </p>
    <p class="text-slate-500 font-medium">
    Product Engineer
    </p>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>
</div>
</div>

<div class="flex h-screen w-screen items-center justify-center">
  <div class="max-w-sm rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800">
    <a href="#">
      <img class="rounded-t-lg" src="https://www.apple.com/v/iphone/home/bk/images/meta/iphone__ky2k6x5u6vue_og.png" alt="" />
    </a>
    <div class="p-5 text-center">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">At your fingertips</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Slate helps you see how many more days you need to work to rich.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 py-2 px-3 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
        Read more
        <svg aria-hidden="true" class="ml-2 -mr-1 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </a>
    </div>
  </div>
</div>

<div class="flex h-full w-full items-center justify-center bg-slate-800">
  <div class="w-64 my-10 max-w-sm rounded-xl border border-gray-200 bg-white shadow-md">
    <a href="#"> </a>
    <div class="flex flex-col items-center justify-center p-6 text-center">
      <a href="#"> </a>
      <div class="mt-4 mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-blue-700">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-8 w-8 text-white">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
        </svg>
      </div>
      <h5 class="mb-5 px-4 font-bold tracking-tight text-gray-700">At your fingertips</h5>
      <p class="mb-3 text-sm font-normal text-gray-700">Slate helps you see how many more days you need to work to reach your financial goal.</p>
      <button class="my-4 rounded bg-blue-600 py-3 px-4 text-sm font-bold text-white hover:bg-blue-700">Try for free</button>
      <img src="https://cdn.mos.cms.futurecdn.net/ypPU5BkLx6jYmawjkhpeNE.png" alt="" />
    </div>
  </div>
</div>

<div class="flex h-screen w-screen  items-center justify-center">
  <div class="max-w-sm rounded-lg border px-8 py-8 border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800">
     <span class="flex gap-4 items-center py-4">
     <svg class='text-blue-500 h-14' xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
<p class='font-bold text-md text-black'>The quick jumps over the lazy dog</p>
     </span>
     <p class='font-bold text-lg text-slate-500'>The quick fox jumps over the lazy dog the quick fox jumps over the lazy dog</p>
    </div>
  </div>
</div>

<div class="m-5">
  <div class="ml-1.5 flex items-center rounded-t-lg" style="width: 317px; height: 132px; background-color: #8ec2f2">
    <div
      class="rounded-full bg-white"
      style="
            width: 72px;
            height: 72px;
            margin: right 15px;
            margin-left: 50px;
          "
    ></div>
    <svg width="35" height="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#1855CB" class="rounded-full bg-white" style="position: absolute; left: 95">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
    </svg>
    <div class="ml-4 w-32 font-semibold text-white" style="right: 50px">
      <p>The quick</p>
      <p>over the lazy dog</p>
    </div>
  </div>

  <div
    class="border"
    style="
          border-color: #a9d6ff;
          width: 328px;
          padding-left: 50px;
          height: 253px;
          border-radius: 11px;
        "
  >
    <div class="text-content w-44 text-sm font-semibold" style="padding-top: 30px; color: #737373">- The best products start with Figma</div>
    <div class="text-content w-40 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Design with real data</div>
    <div class="text-content w-48 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Lightning fast prototyping</div>
    <div class="text-content w-40 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Fastest way to organize</div>
    <div class="text-content w-44 text-sm font-semibold" style="margin-top: 5px; color: #737373">- Work at the speed of thought.</div>
    <div class="font-medium" style="margin-top: 5px">
      <a href="#" style="color: #1855cb">Learn More</a>
    </div>
  </div>
</div>