Tailwind CSS components preview

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div class="relative isolate overflow-clip bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
      <div aria-hidden="true" class="absolute right-0 top-0 -z-10 aspect-square w-full max-w-3xl translate-x-3/4 rounded-full bg-pink-500/60 blur-[10rem] lg:-top-[40rem] lg:left-1/2 lg:-translate-x-1/2"></div>
      <div class="mx-auto max-w-md text-center lg:mx-0 lg:flex-auto lg:py-24 lg:text-start">
        <h2 class="text-3xl font-semibold tracking-tight text-white sm:text-4xl">Want to partner with design experts in SaaS?</h2>
        <p class="mt-6 text-base text-gray-300">We're excited to talk to you about your project requirements and business goals.</p>
        <div class="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
          <a href="#" class="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Schedule a call</a>
          <a href="#" class="text-sm font-semibold leading-6 text-white">Send an email</a>
        </div>
      </div>
      <div class="relative mt-16 h-80 lg:mt-8 lg:h-auto">
        <img width="1920" height="1139" class="absolute left-0 top-0 w-[58rem] max-w-none rounded-2xl bg-white/5 ring-1 ring-white/10 lg:top-14" src="https://htmlwind.com/assets/images/dark-dashboard-screenshot.webp" alt="dashboard screenshot" />
      </div>
    </div>
  </div>
</div>

<div class="bg-white py-24 sm:py-32">
  <div class="px-6 text-center lg:px-8">
    <h2 class="mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Stay informed about our launch!</h2>
    <p class="mx-auto mt-2 max-w-xl text-lg leading-8 text-gray-600">Receive exclusive updates and be among the first to explore our latest features.</p>
    <form method="POST" action="#" class="mx-auto mt-10 sm:max-w-md">
      <div class="flex flex-col flex-wrap gap-4 sm:flex-row">
        <div class="flex-auto">
          <label for="email" class="sr-only">Email</label>
          <input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
        </div>
        <button type="submit" class="flex-none rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
      </div>
    </form>
    <div class="mt-6 flex flex-col items-center justify-center gap-x-4 gap-y-2 sm:flex-row">
      <div class="flex flex-none items-center -space-x-3" role="group" aria-label="Subscriber profile pictures">
        <div class="relative -m-0.5 rounded-full bg-white p-0.5">
          <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
          <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
        </div>
        <div class="relative -m-0.5 rounded-full bg-white p-0.5">
          <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
          <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
        </div>
        <div class="relative -m-0.5 rounded-full bg-white p-0.5">
          <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
          <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
        </div>
        <div class="relative -m-0.5 rounded-full bg-white p-0.5">
          <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
          <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
        </div>
      </div>
      <p class="text-sm font-medium text-gray-600" aria-label="3,000 subscribers">3,000+ already subscribed</p>
    </div>
  </div>
</div>

<div class="w-full">
  <div class="sm:hidden">
    <select aria-label="Select a tab" class="w-full appearance-none rounded-lg border-none bg-white px-3.5 py-2.5 text-base font-medium text-gray-900 shadow-sm outline outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-pink-500 focus:ring-0">
      <option>Overview</option>
      <option selected>Analytics</option>
      <option>Profile</option>
      <option>Notifications</option>
      <option>Plan</option> 
      <option>Settings</option>
    </select>
  </div>
  <div class="hidden sm:block">
    <div class="border-b border-gray-200">
      <nav aria-label="Tabs" class="-mb-px flex items-end gap-x-8">
        <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Overview</a>
        <a href="#" aria-current="page" class="inline-flex border-b-2 border-pink-500 px-1 py-3.5 text-sm font-semibold text-pink-500">Analytics</a>
        <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Profile</a>
        <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Notifications</a>
        <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Plan</a>
        <a href="#" class="inline-flex border-b-2 border-transparent px-1 py-3.5 text-sm font-semibold text-gray-500 hover:border-gray-300 hover:text-gray-700">Settings</a>
      </nav>
    </div>
  </div>
</div>

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
    <h2 class="mx-auto max-w-2xl px-6 text-center text-xl font-semibold leading-8 tracking-tight text-gray-900 sm:px-0">Trusted by companies across the globe</h2>
    <div class="mt-8 grid grid-cols-2 gap-1 overflow-hidden sm:grid-cols-4 sm:rounded-2xl lg:grid-cols-6">
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-214.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-221.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-216.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-317.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-284.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-311.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-288.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-263.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-220.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-211.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-329.svg" alt="Logoipsum" />
      </div>
      <div class="flex items-center justify-center bg-gray-500/5 p-8">
        <img class="max-h-12 w-full object-contain" src="https://htmlwind.com/assets/images/logo/logoipsum-325.svg" alt="Logoipsum" />
      </div>
    </div>
  </div>
</div>

<!-- button-xl -->
<button type="button" class="rounded-md bg-pink-500 px-4 py-3 text-base font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-lg -->
<button type="button" class="rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-base -->
<button type="button" class="rounded-md bg-pink-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-sm -->
<button type="button" class="rounded-md bg-pink-500 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>
<!-- button-xs -->
<button type="button" class="rounded-md bg-pink-500 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Button text</button>

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:mx-0">
      <h2 class="text-base font-semibold leading-7 text-pink-500">Key highlights</h2>
      <p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover the core features</p>
    </div>
    <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mx-0 lg:max-w-none">
      <dl class="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
        <div class="flex flex-col">
          <dt class="text-xl font-medium text-gray-900">
            <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
              <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M14 10C14 9.44771 13.5523 9 13 9H12.5C9.46243 9 7 11.4624 7 14.5C7 17.5376 9.46243 20 12.5 20H17.5C20.5376 20 23 17.5376 23 14.5C23 12.0091 21.3441 9.90488 19.073 9.22823C18.5098 9.06042 18 9.52887 18 10.1166V10.1683C18 10.6659 18.3745 11.0735 18.8345 11.2634C20.1055 11.788 21 13.0395 21 14.5C21 16.433 19.433 18 17.5 18H12.5C10.567 18 9 16.433 9 14.5C9 12.567 10.567 11 12.5 11H13C13.5523 11 14 10.5523 14 10Z" fill="currentColor" />
                <path d="M11.5 4C14.5376 4 17 6.46243 17 9.5C17 12.5376 14.5376 15 11.5 15H11C10.4477 15 10 14.5523 10 14C10 13.4477 10.4477 13 11 13H11.5C13.433 13 15 11.433 15 9.5C15 7.567 13.433 6 11.5 6H6.5C4.567 6 3 7.567 3 9.5C3 10.9605 3.89451 12.212 5.16553 12.7366C5.62548 12.9264 6 13.3341 6 13.8317V13.8834C6 14.4711 5.49024 14.9396 4.92699 14.7718C2.65592 14.0951 1 11.9909 1 9.5C1 6.46243 3.46243 4 6.5 4H11.5Z" fill="currentColor" />
              </svg>
            </div>
            Effortless Integration
          </dt>
          <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
            <p class="flex-auto">Easily connect with the tools you already use and love. Our platform is designed for seamless integration with a variety of third-party applications.</p>
            <p class="mt-10">
              <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                Learn more
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </a>
            </p>
          </dd>
        </div>
        <div class="flex flex-col">
          <dt class="text-xl font-medium text-gray-900">
            <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
              <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M2 12.8799V11.1199C2 10.0799 2.85 9.21994 3.9 9.21994C5.71 9.21994 6.45 7.93994 5.54 6.36994C5.02 5.46994 5.33 4.29994 6.24 3.77994L7.97 2.78994C8.76 2.31994 9.78 2.59994 10.25 3.38994L10.36 3.57994C11.26 5.14994 12.74 5.14994 13.65 3.57994L13.76 3.38994C14.23 2.59994 15.25 2.31994 16.04 2.78994L17.77 3.77994C18.68 4.29994 18.99 5.46994 18.47 6.36994C17.56 7.93994 18.3 9.21994 20.11 9.21994C21.15 9.21994 22.01 10.0699 22.01 11.1199V12.8799C22.01 13.9199 21.16 14.7799 20.11 14.7799C18.3 14.7799 17.56 16.0599 18.47 17.6299C18.99 18.5399 18.68 19.6999 17.77 20.2199L16.04 21.2099C15.25 21.6799 14.23 21.3999 13.76 20.6099L13.65 20.4199C12.75 18.8499 11.27 18.8499 10.36 20.4199L10.25 20.6099C9.78 21.3999 8.76 21.6799 7.97 21.2099L6.24 20.2199C5.33 19.6999 5.02 18.5299 5.54 17.6299C6.45 16.0599 5.71 14.7799 3.9 14.7799C2.85 14.7799 2 13.9199 2 12.8799Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
            Advanced Customization
          </dt>
          <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
            <p class="flex-auto">Adapt the platform to suit your specific business needs. With our extensive customization options, you can modify features, adjust settings, and personalize your experience.</p>
            <p class="mt-10">
              <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                Learn more
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </a>
            </p>
          </dd>
        </div>
        <div class="flex flex-col">
          <dt class="text-xl font-medium text-gray-900">
            <div class="mb-6 flex h-11 w-11 items-center justify-center rounded-lg bg-pink-500 shadow-sm">
              <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M20.91 11.12C20.91 16.01 17.36 20.59 12.51 21.93C12.18 22.02 11.82 22.02 11.49 21.93C6.63996 20.59 3.08997 16.01 3.08997 11.12V6.72997C3.08997 5.90997 3.70998 4.97998 4.47998 4.66998L10.05 2.39001C11.3 1.88001 12.71 1.88001 13.96 2.39001L19.53 4.66998C20.29 4.97998 20.92 5.90997 20.92 6.72997L20.91 11.12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
            Enhanced Security
          </dt>
          <dd class="mt-3 flex flex-auto flex-col text-base leading-7 text-gray-600">
            <p class="flex-auto">Protect your data with our state-of-the-art security features. Our SaaS platform is built with advanced encryption and compliance tools to safeguard your information.</p>
            <p class="mt-10">
              <a href="#" class="inline-flex items-center gap-x-1 text-base font-semibold text-pink-500">
                Learn more
                <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <path d="M5 12H19M19 12L13 6M19 12L13 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </a>
            </p>
          </dd>
        </div>
      </dl>
    </div>
  </div>
</div>

<section class="relative overflow-hidden bg-gray-50 py-24 sm:py-32">
  <div class="absolute -left-[30rem] -top-[25rem] aspect-square h-[50rem] rounded-full shadow-2xl shadow-gray-500/10"></div>
  <div class="absolute -bottom-[20rem] -right-[32rem] aspect-square h-[50rem] rounded-full shadow-2xl shadow-gray-500/20">
    <div class="absolute left-1/2 top-1/2 aspect-square h-[30rem] -translate-x-1/2 -translate-y-1/2 rounded-full shadow-2xl shadow-gray-500/30"></div>
  </div>
  <div class="relative mx-auto max-w-2xl px-6 lg:max-w-4xl lg:px-8">
    <svg class="mx-auto h-10 w-10 text-gray-900/10" viewBox="0 0 38 31" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M9.56016 14C11.8268 14.2 13.6602 15.0333 15.0602 16.5C16.4602 17.9667 17.1602 19.8333 17.1602 22.1C17.1602 24.5667 16.3602 26.6333 14.7602 28.3C13.2268 29.9 11.2935 30.7 8.96016 30.7C6.29349 30.7 4.16016 29.7667 2.56016 27.9C0.960157 25.9667 0.160156 23.2 0.160156 19.6C0.160156 12.6 2.62682 6.53333 7.56016 1.4C8.49349 0.466663 9.56016 -3.8147e-06 10.7602 -3.8147e-06C11.8935 -3.8147e-06 12.8935 0.399997 13.7602 1.2C14.6268 1.93333 15.0602 2.83333 15.0602 3.9C15.0602 4.83333 14.6935 5.7 13.9602 6.5C11.7602 8.83333 10.2935 11.3333 9.56016 14ZM30.2602 14C32.5268 14.2 34.3602 15.0333 35.7602 16.5C37.1602 17.9667 37.8602 19.8333 37.8602 22.1C37.8602 24.5667 37.0602 26.6333 35.4602 28.3C33.9268 29.9 31.9935 30.7 29.6602 30.7C26.9935 30.7 24.8602 29.7667 23.2602 27.9C21.6602 25.9667 20.8602 23.2 20.8602 19.6C20.8602 12.6 23.3268 6.53333 28.2602 1.4C29.1935 0.466663 30.2602 -3.8147e-06 31.4602 -3.8147e-06C32.5935 -3.8147e-06 33.5935 0.399997 34.4602 1.2C35.3268 1.93333 35.7602 2.83333 35.7602 3.9C35.7602 4.83333 35.3935 5.7 34.6602 6.5C32.4602 8.83333 30.9935 11.3333 30.2602 14Z" fill="currentColor" />
    </svg>
    <figure class="mt-4">
      <blockquote class="text-center text-xl font-semibold leading-8 text-gray-900 sm:text-2xl sm:leading-9">
        <p>Working with Gotham Innovations has been a fantastic experience. Their innovative spirit and dedication to excellence align perfectly with our mission at DarkLabs. Collaborating with James and his team has led to some truly exciting breakthroughs. It’s partnerships like these that fuel my passion for what I do.</p>
      </blockquote>
      <figcaption class="mt-10">
        <div class="flex justify-center rounded-full">
          <div class="relative">
            <span aria-hidden="true" class="absolute inset-0 h-16 w-16 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img alt="" class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
          </div>
        </div>
        <div class="mt-4 text-center text-xl font-semibold text-gray-900">Emily Harper</div>
        <div class="text-center text-lg font-normal text-gray-600">Lead Scientist at DarkLabs</div>
      </figcaption>
    </figure>
  </div>
</section>

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:mx-0">
      <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Get in touch</h2>
      <p class="mt-6 text-lg leading-8 text-gray-600">Have any questions or need assistance? Feel free to reach out to us. We're here to connect with you and ensure all your queries are addressed.</p>
    </div>
    <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-4">
      <div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
        <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
          <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M3 11C3 9.11438 3 8.17157 3.58579 7.58579C4.17157 7 5.11438 7 7 7H8H16H17C18.8856 7 19.8284 7 20.4142 7.58579C21 8.17157 21 9.11438 21 11V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H16H8H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
            <path d="M8 21V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V21" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
          </svg>
        </div>
        <div class="flex flex-auto flex-col items-start">
          <div class="flex-auto">
            <h3 class="text-xl font-medium tracking-tight text-gray-900">Contact sales</h3>
            <p class="mt-2 text-base leading-7 text-gray-600">Talk to our helpful team.</p>
          </div>
          <a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">[email protected]</a>
        </div>
      </div>
      <div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
        <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
          <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M20 19H18C16.8954 19 16 18.1046 16 17V15C16 13.8954 16.8954 13 18 13H20M20 19V13M20 19V19C20 20.6569 18.6569 22 17 22H11M4 13V17C4 18.1046 4.89543 19 6 19V19C7.10457 19 8 18.1046 8 17V15C8 13.8954 7.10457 13 6 13H4ZM4 13V10C4 5.58172 7.58172 2 12 2V2C16.4183 2 20 5.58172 20 10V13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <div class="flex flex-auto flex-col items-start">
          <div class="flex-auto">
            <h3 class="text-xl font-medium tracking-tight text-gray-900">Contact support</h3>
            <p class="mt-2 text-base leading-7 text-gray-600">We're ready to assist you.</p>
          </div>
          <a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">[email protected]</a>
        </div>
      </div>
      <div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
        <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500">
          <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M12 21C15.5 17.4 19 14.1764 19 10.2C19 6.22355 15.866 3 12 3C8.13401 3 5 6.22355 5 10.2C5 14.1764 8.5 17.4 12 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <div class="flex flex-auto flex-col items-start">
          <div class="flex-auto">
            <h3 class="text-xl font-medium tracking-tight text-gray-900">Visit us</h3>
            <p class="mt-2 text-base leading-7 text-gray-600">Come see us at our HQ.</p>
          </div>
          <a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">Get directions</a>
        </div>
      </div>
      <div class="flex flex-col gap-y-12 rounded-2xl bg-gray-50 p-6 shadow-sm">
        <div class="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-pink-500 shadow-sm">
          <svg class="h-6 w-6 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <div class="flex flex-auto flex-col items-start">
          <div class="flex-auto">
            <h3 class="text-xl font-medium tracking-tight text-gray-900">Call us</h3>
            <p class="mt-2 text-base leading-7 text-gray-600">Weekdays, 8am – 5pm.</p>
          </div>
          <a href="#" class="mt-4 inline-block text-base font-semibold text-pink-500">+1 (555) 123-4567</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- avatars-base -->
<div class="flex items-center -space-x-3.5">
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
</div>
<!-- avatars-sm -->
<div class="flex items-center -space-x-3">
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
</div>
<!-- avatars-xs -->
<div class="flex items-center -space-x-1.5">
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
  <span class="relative -m-0.5 rounded-full bg-white p-0.5">
    <span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
    <img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </span>
</div>

<span class="inline-flex -space-x-px rounded-lg shadow-sm">
  <button type="button" class="rounded-l-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Day</button>
  <button type="button" class="bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Week</button>
  <button type="button" class="bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Month</button>
  <button type="button" class="rounded-r-lg bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10">Year</button>
</span>

<nav aria-label="Progress">
  <ol role="list" class="flex items-center gap-x-4 sm:gap-x-8">
    <li>
      <a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
        <svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor" />
        </svg>
        <span class="sr-only">Step 1</span>
      </a>
    </li>
    <li>
      <a href="#" class="flex size-8 items-center justify-center rounded-full bg-pink-500 hover:bg-pink-600">
        <svg aria-hidden="true" class="size-4 text-white" viewBox="0 0 183 192" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M68.1014 192C62.1366 192 56.4872 189.216 52.8672 184.415L3.87368 119.664C2.35894 117.664 1.25309 115.386 0.619333 112.958C-0.0144202 110.531 -0.163642 108.002 0.180196 105.517C0.524035 103.032 1.35419 100.639 2.62321 98.4748C3.89222 96.3108 5.57521 94.4181 7.57596 92.905C9.576 91.3857 11.8561 90.2761 14.2857 89.6398C16.7153 89.0035 19.2465 88.853 21.7343 89.197C24.2221 89.5411 26.6176 90.3728 28.7834 91.6446C30.9493 92.9163 32.8429 94.6031 34.3558 96.6082L66.5931 139.181L147.646 8.99321C150.334 4.69475 154.616 1.6382 159.555 0.494002C164.493 -0.650192 169.683 0.211401 173.987 2.88979C182.941 8.45831 185.697 20.2537 180.102 29.2237L84.3366 182.975C82.7018 185.612 80.4485 187.809 77.7722 189.377C75.0959 190.945 72.0775 191.836 68.979 191.973C68.6773 192 68.4031 192 68.1014 192Z" fill="currentColor" />
        </svg>
        <span class="sr-only">Step 2</span>
      </a>
    </li>
    <li>
      <a href="#" aria-current="step" class="flex size-8 items-center justify-center rounded-full bg-pink-500 ring-2 ring-pink-400 ring-offset-2">
        <span aria-hidden="true" class="size-2.5 rounded-full bg-white"></span>
        <span class="sr-only">Step 3</span>
      </a>
    </li>
    <li>
      <a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
        <span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
        <span class="sr-only">Step 4</span>
      </a>
    </li>
    <li>
      <a href="#" class="group flex size-8 items-center justify-center rounded-full bg-white ring-2 ring-inset ring-gray-300 hover:ring-gray-400">
        <span aria-hidden="true" class="size-2.5 rounded-full bg-white group-hover:bg-gray-300"></span>
        <span class="sr-only">Step 5</span>
      </a>
    </li>
  </ol>
</nav>

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <h2 class="text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The impact we’ve made</h2>
    <dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-center sm:grid-cols-2 lg:max-w-none lg:grid-cols-4">
      <div class="flex flex-col gap-y-2">
        <dt class="text-base leading-7 text-gray-600">Customer satisfaction</dt>
        <dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">98%</dd>
      </div>
      <div class="flex flex-col gap-y-2">
        <dt class="text-base leading-7 text-gray-600">Global user base</dt>
        <dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">28M</dd>
      </div>
      <div class="flex flex-col gap-y-2">
        <dt class="text-base leading-7 text-gray-600">Expert team members</dt>
        <dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">150+</dd>
      </div>
      <div class="flex flex-col gap-y-2">
        <dt class="text-base leading-7 text-gray-600">Rapid business growth</dt>
        <dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">320%</dd>
      </div>
    </dl>
  </div>
</div>

<!-- 
This component requires the @tailwindcss/forms plugin for form styling. 
To install and set up, run `npm install -D @tailwindcss/forms` and add it to your tailwind.config.js file like so:

// tailwind.config.js
module.exports = {
  //...
  plugins: [
    require('@tailwindcss/forms'),
    // other plugins
  ],
};
-->
<div class="flex min-h-dvh flex-col bg-white">
  <div class="flex min-h-full flex-1 flex-col items-center justify-center px-6 py-12 lg:px-8">
    <div class="w-full max-w-sm space-y-8">
      <div class="text-center">
        <img class="mx-auto h-12 w-auto" src="https://htmlwind.com/assets/images/logo/htmlwind.svg" alt="Htmlwind Logo" />
        <h2 class="mt-6 text-2xl font-semibold text-gray-900 sm:text-3xl">Login to your account</h2>
        <p class="mt-3 text-base text-gray-600">Welcome back! Please enter your credentials.</p>
      </div>
      <div>
        <form class="space-y-6" action="#">
          <div class="space-y-5">
            <div>
              <label for="email" class="block select-none text-sm font-medium leading-6 text-gray-900">Email</label>
              <input type="email" name="email" id="email" placeholder="Enter your email" autocomplete="email" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
            </div>
            <div>
              <label for="password" class="block select-none text-sm font-medium leading-6 text-gray-900">Password</label>
              <input type="password" name="password" id="password" placeholder="Enter your password" autocomplete="current-password" class="mt-2 w-full rounded-md border-0 bg-white px-3.5 py-2 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" required />
            </div>
          </div>
          <div class="flex items-center justify-between">
            <div class="flex items-center gap-x-2.5">
              <div class="group relative flex h-4 w-4">
                <input type="checkbox" name="remember-me" id="remember-me" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
                <svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
                  <path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </div>
              <label for="remember-me" class="select-none text-sm text-gray-900">Remember me</label>
            </div>
            <div>
              <a href="#" class="inline-block text-sm font-semibold text-pink-500 hover:text-pink-400">Forgot password?</a>
            </div>
          </div>
          <div>
            <button type="submit" class="block w-full rounded-md bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Sign in</button>
          </div>
        </form>
      </div>
      <div>
        <p class="text-center text-sm text-gray-500">
          Don't have an account?
          <a href="#" class="font-semibold text-pink-500 hover:text-pink-400">Sign up</a>
        </p>
      </div>
    </div>
  </div>
</div>

<footer class="bg-white py-12 sm:pt-16">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <img class="h-8 sm:mx-auto" src="https://htmlwind/assets/images/logo/logoipsum-283.svg" alt="Company name" />
    <nav aria-label="Footer" class="mt-8 grid grid-cols-2 gap-6 sm:flex sm:justify-center sm:gap-8">
      <div>
        <a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">About us</a>
      </div>
      <div>
        <a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Pricing</a>
      </div>
      <div>
        <a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Careers</a>
      </div>
      <div>
        <a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Blog</a>
      </div>
      <div>
        <a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Press</a>
      </div>
      <div>
        <a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Contact</a>
      </div>
    </nav>

    <div class="mt-12 border-t border-gray-900/10 pt-8 sm:mt-16 sm:flex sm:items-center sm:justify-between">
      <div class="flex items-center gap-6 sm:order-2">
        <a class="text-gray-400 hover:text-gray-500" href="#">
          <span class="sr-only">X</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
          </svg>
        </a>
        <a class="text-gray-400 hover:text-gray-500" href="#">
          <span class="sr-only">LinkedIn</span>
          <svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
            <path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
          </svg>
        </a>
        <a class="text-gray-400 hover:text-gray-500" href="#">
          <span class="sr-only">Facebook</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
          </svg>
        </a>
        <a class="text-gray-400 hover:text-gray-500" href="#">
          <span class="sr-only">Instagram</span>
          <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"></path>
            <path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor"></path>
          </svg>
        </a>
        <a class="text-gray-400 hover:text-gray-500" href="#">
          <span class="sr-only">GitHub</span>
          <svg class="h-5 w-5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
            <path d="M24,1.9a21.6,21.6,0,0,0-6.8,42.2c1,.2,1.8-.9,1.8-1.8V39.4c-6,1.3-7.9-2.9-7.9-2.9a6.5,6.5,0,0,0-2.2-3.2C6.9,31.9,9,32,9,32a4.3,4.3,0,0,1,3.3,2c1.7,2.9,5.5,2.6,6.7,2.1a5.4,5.4,0,0,1,.5-2.9C12.7,32,9,28,9,22.6A10.7,10.7,0,0,1,11.9,15a6.2,6.2,0,0,1,.3-6.4,8.9,8.9,0,0,1,6.4,2.9,15.1,15.1,0,0,1,5.4-.8,17.1,17.1,0,0,1,5.4.7,9,9,0,0,1,6.4-2.8,6.5,6.5,0,0,1,.4,6.4A10.7,10.7,0,0,1,39,22.6C39,28,35.3,32,28.5,33.2a5.4,5.4,0,0,1,.5,2.9v6.2a1.8,1.8,0,0,0,1.9,1.8A21.7,21.7,0,0,0,24,1.9Z" />
          </svg>
        </a>
      </div>
      <p class="mt-6 text-sm leading-6 text-gray-500 sm:mt-0 md:order-1">© 2024 Your Company. All right reserved.</p>
    </div>
  </div>
</footer>

<span class="rounded-md bg-gray-50 px-1.5 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">Badge</span>
<span class="rounded-md bg-yellow-50 px-1.5 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">Badge</span>
<span class="rounded-md bg-red-50 px-1.5 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">Badge</span>
<span class="rounded-md bg-green-50 px-1.5 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">Badge</span>
<span class="rounded-md bg-sky-50 px-1.5 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">Badge</span>
<span class="rounded-md bg-blue-50 px-1.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">Badge</span>
<span class="rounded-md bg-indigo-50 px-1.5 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">Badge</span>
<span class="rounded-md bg-purple-50 px-1.5 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">Badge</span>
<span class="rounded-md bg-pink-50 px-1.5 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">Badge</span>
<span class="rounded-md bg-orange-50 px-1.5 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">Badge</span>

<div class="bg-white py-24 sm:py-32 lg:py-40">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="lg:grid lg:grid-cols-12 lg:gap-8">
      <div class="lg:col-span-5">
        <h2 class="text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl">Frequently asked questions</h2>
        <p class="mt-6 text-base leading-7 text-gray-600">
          Still need help?
          <a href="#" class="font-semibold text-pink-500 hover:text-pink-400">Chat</a>
          to us.
        </p>
      </div>
      <div class="mt-10 lg:col-span-7 lg:mt-0">
        <dl class="*:border-b *:border-gray-100 *:py-6">
          <div class="first:pt-0 last:border-0 last:pb-0">
            <dt class="text-xl font-semibold text-gray-900">Can I use your software to become a billionaire?</dt>
            <dd class="mt-3 text-base leading-7 text-gray-600">Absolutely! But only if you already have a billion dollars. Otherwise, we recommend starting with something more attainable, like getting through your email inbox.</dd>
          </div>
          <div class="first:pt-0 last:border-0 last:pb-0">
            <dt class="text-xl font-semibold text-gray-900">Is your software bug-free?</dt>
            <dd class="mt-3 text-base leading-7 text-gray-600">Our software is as bug-free as a pristine forest... which is to say, there are probably a few bugs hiding somewhere. But don't worry, our team of digital exterminators is on standby!</dd>
          </div>
          <div class="first:pt-0 last:border-0 last:pb-0">
            <dt class="text-xl font-semibold text-gray-900">What do I do if I forget my password?</dt>
            <dd class="mt-3 text-base leading-7 text-gray-600">First, try panicking for a few seconds – this seems to help most people. If that doesn't work, click the “Forgot Password” link, and we’ll send you on a thrilling adventure to reset it!</dd>
          </div>
          <div class="first:pt-0 last:border-0 last:pb-0">
            <dt class="text-xl font-semibold text-gray-900">Can your software make me coffee?</dt>
            <dd class="mt-3 text-base leading-7 text-gray-600">We're working on it! But until then, our software is excellent at giving you more time to make your own coffee. We call that a win-win!</dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
</div>

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl sm:text-center">
      <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Meet our team</h2>
      <p class="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600">Get to know the passionate professionals who are committed to driving innovation and excellence in our team.</p>
    </div>
    <ul role="list" class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 sm:grid-cols-2 lg:max-w-4xl xl:max-w-none">
      <li class="flex flex-col items-start gap-x-10 gap-y-6 xl:flex-row">
        <div class="flex-none">
          <div class="relative aspect-square w-56 overflow-hidden rounded-full bg-gray-200">
            <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/jake-nackos-IF9TK5Uy-KI-unsplash.webp" alt="" />
          </div>
        </div>
        <div class="flex-auto">
          <h3 class="text-2xl font-semibold leading-9 tracking-tight text-gray-900">Emily Carter</h3>
          <p class="text-lg leading-8 text-gray-600">Chief Executive Officer</p>
          <p class="mt-4 text-base leading-7 text-gray-600">An expert in streamlining operations and enhancing organizational efficiency, She ensures our team performs at its best.</p>
          <ul role="list" class="mt-6 flex gap-x-5">
            <li>
              <a class="text-gray-400 hover:text-gray-500" href="#">
                <span class="sr-only">X</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
                  <path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
                </svg>
              </a>
            </li>
            <li>
              <a class="text-gray-400 hover:text-gray-500" href="#">
                <span class="sr-only">LinkedIn</span>
                <svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
                  <path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </li>
      <li class="flex flex-col items-start gap-x-10 gap-y-6 xl:flex-row">
        <div class="flex-none">
          <div class="relative aspect-square w-56 overflow-hidden rounded-full bg-gray-200">
            <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/ian-dooley-d1UPkiFd04A-unsplash.webp" alt="" />
          </div>
        </div>
        <div class="flex-auto">
          <h3 class="text-2xl font-semibold leading-9 tracking-tight text-gray-900">David Miller</h3>
          <p class="text-lg leading-8 text-gray-600">Head of Product</p>
          <p class="mt-4 text-base leading-7 text-gray-600">With a strong focus on product strategy and innovation, David drives the development of user-centered solutions.</p>
          <ul role="list" class="mt-6 flex gap-x-5">
            <li>
              <a class="text-gray-400 hover:text-gray-500" href="#">
                <span class="sr-only">X</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
                  <path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
                </svg>
              </a>
            </li>
            <li>
              <a class="text-gray-400 hover:text-gray-500" href="#">
                <span class="sr-only">LinkedIn</span>
                <svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
                  <path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </li>
      <li class="flex flex-col items-start gap-x-10 gap-y-6 xl:flex-row">
        <div class="flex-none">
          <div class="relative aspect-square w-56 overflow-hidden rounded-full bg-gray-200">
            <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/matheus-ferrero-W7b3eDUb_2I-unsplash.webp" alt="" />
          </div>
        </div>
        <div class="flex-auto">
          <h3 class="text-2xl font-semibold leading-9 tracking-tight text-gray-900">Laura Bennett</h3>
          <p class="text-lg leading-8 text-gray-600">Creative Director</p>
          <p class="mt-4 text-base leading-7 text-gray-600">Laura leads our creative vision, transforming innovative concepts into impactful and engaging designs.</p>
          <ul role="list" class="mt-6 flex gap-x-5">
            <li>
              <a class="text-gray-400 hover:text-gray-500" href="#">
                <span class="sr-only">X</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
                  <path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
                </svg>
              </a>
            </li>
            <li>
              <a class="text-gray-400 hover:text-gray-500" href="#">
                <span class="sr-only">LinkedIn</span>
                <svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
                  <path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </li>
      <li class="flex flex-col items-start gap-x-10 gap-y-6 xl:flex-row">
        <div class="flex-none">
          <div class="relative aspect-square w-56 overflow-hidden rounded-full bg-gray-200">
            <span aria-hidden="true" class="absolute inset-0 h-full w-full rounded-full ring-1 ring-inset ring-gray-900/10"></span>
            <img width="400" height="400" class="h-full w-full object-cover" src="https://htmlwind.com/assets/images/portraits/ludovic-migneault-4uj3iZ5m084-unsplash.webp" alt="" />
          </div>
        </div>
        <div class="flex-auto">
          <h3 class="text-2xl font-semibold leading-9 tracking-tight text-gray-900">Anthony Collins</h3>
          <p class="text-lg leading-8 text-gray-600">Senior Developer</p>
          <p class="mt-4 text-base leading-7 text-gray-600">A seasoned developer, Anthony specializes in crafting scalable and efficient code.</p>
          <ul role="list" class="mt-6 flex gap-x-5">
            <li>
              <a class="text-gray-400 hover:text-gray-500" href="#">
                <span class="sr-only">X</span>
                <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor">
                  <path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717  l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339  l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
                </svg>
              </a>
            </li>
            <li>
              <a class="text-gray-400 hover:text-gray-500" href="#">
                <span class="sr-only">LinkedIn</span>
                <svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
                  <path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
                </svg>
              </a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-2xl lg:mx-0">
      <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Latest blog posts</h2>
      <p class="mt-2 text-lg leading-8 text-gray-600">Stay informed with our latest articles and expert opinions.</p>
    </div>
    <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:mt-20 lg:max-w-none lg:grid-cols-3">
      <article class="flex flex-col items-start justify-between">
        <a href="#" class="inline-block rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Productivity</a>
        <div class="mt-5 flex items-center gap-x-2 text-sm text-gray-500">
          <time datetime="2024-08-17">August 17, 2024</time>
          <span aria-hidden="true">•</span>
          <p>7 mins read</p>
        </div>
        <div class="group relative mt-3">
          <h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
            <a href="#">
              <span class="absolute inset-0"></span>
              Maximizing Efficiency with Automation: A Beginner's Guide
            </a>
          </h3>
          <p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Learn how automation can transform your business operations, streamline workflows, and save valuable time in this comprehensive beginner's guide.</p>
        </div>
        <div class="relative mt-8 flex justify-start gap-x-2">
          <div class="flex-none">
            <span class="relative rounded-full">
              <span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
              <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
            </span>
          </div>
          <div class="text-sm">
            <p class="font-semibold text-gray-900">
              <a href="#">
                <span class="absolute inset-0"></span>
                Jane Doe
              </a>
            </p>
            <p class="text-gray-600">Senior Product Manager</p>
          </div>
        </div>
      </article>
      <article class="flex flex-col items-start justify-between">
        <a href="#" class="inline-block rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Industry Insights</a>
        <div class="mt-5 flex items-center gap-x-2 text-sm text-gray-500">
          <time datetime="2024-08-10">August 10, 2024</time>
          <span aria-hidden="true">•</span>
          <p>6 mins read</p>
        </div>
        <div class="group relative mt-3">
          <h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
            <a href="#">
              <span class="absolute inset-0"></span>
              The Future of SaaS: Trends to Watch in 2024
            </a>
          </h3>
          <p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Explore the emerging trends in the SaaS industry that are set to shape the future, from AI integration to personalized user experiences.</p>
        </div>
        <div class="relative mt-8 flex justify-start gap-x-2">
          <div class="flex-none">
            <span class="relative rounded-full">
              <span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
              <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
            </span>
          </div>
          <div class="text-sm">
            <p class="font-semibold text-gray-900">
              <a href="#">
                <span class="absolute inset-0"></span>
                John Smith
              </a>
            </p>
            <p class="text-gray-600">Head of Strategy</p>
          </div>
        </div>
      </article>
      <article class="flex flex-col items-start justify-between">
        <a href="#" class="inline-block rounded-full bg-gray-100 px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-200">Technology</a>
        <div class="mt-5 flex items-center gap-x-2 text-sm text-gray-500">
          <time datetime="2024-08-03">August 3, 2024</time>
          <span aria-hidden="true">•</span>
          <p>8 mins read</p>
        </div>
        <div class="group relative mt-3">
          <h3 class="text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">
            <a href="#">
              <span class="absolute inset-0"></span>
              Building a Scalable Architecture: Key Considerations
            </a>
          </h3>
          <p class="mt-5 line-clamp-2 text-sm leading-6 text-gray-600">Discover the critical elements of building a scalable software architecture that can grow with your business needs and handle increased demand effortlessly.</p>
        </div>
        <div class="relative mt-8 flex justify-start gap-x-2">
          <div class="flex-none">
            <span class="relative rounded-full">
              <span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
              <img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
            </span>
          </div>
          <div class="text-sm">
            <p class="font-semibold text-gray-900">
              <a href="#">
                <span class="absolute inset-0"></span>
                Emily Brown
              </a>
            </p>
            <p class="text-gray-600">Chief Technology Officer (CTO)</p>
          </div>
        </div>
      </article>
    </div>
  </div>
</div>

<nav class="flex border-t border-gray-200 pt-4 md:pt-5" aria-label="Pagination">
  <div class="flex flex-1 items-center">
    <a href="#" class="flex items-center gap-x-1.5 text-sm font-semibold text-gray-500 hover:text-gray-700">
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      Previous
    </a>
  </div>
  <div class="hidden md:flex md:items-center md:gap-x-0.5">
    <a href="#" aria-current="page" class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-pink-500 text-sm font-medium text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">1</a>
    <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">2</a>
    <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">3</a>
    <span class="inline-flex h-10 w-10 items-center justify-center text-sm font-medium text-gray-500">...</span>
    <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">8</a>
    <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">9</a>
    <a href="#" class="inline-flex h-10 w-10 items-center justify-center rounded-lg text-sm font-medium text-gray-500 hover:bg-gray-50 hover:text-gray-700">10</a>
  </div>
  <div class="flex flex-1 items-center justify-end">
    <a href="#" class="flex items-center gap-x-1.5 text-sm font-semibold text-gray-500 hover:text-gray-700">
      Next
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M9 6L15 12L9 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </a>
  </div>
</nav>

<!-- Success alert -->
<div class="mx-auto w-full max-w-4xl">
  <div class="rounded-lg bg-green-50 p-4 ring-1 ring-inset ring-green-200">
    <div class="flex items-start gap-x-4">
      <div class="shrink-0">
        <svg aria-hidden="true" class="size-5 text-green-500" viewBox="0 0 55 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M43.8919 18.4573C45.1123 19.6777 45.1123 21.6563 43.8919 22.8767L25.9716 40.797C24.7513 42.0173 22.7727 42.0173 21.5523 40.797L13.5257 32.771C12.3053 31.5507 12.3052 29.572 13.5256 28.3516C14.7459 27.1312 16.7245 27.1311 17.945 28.3515L23.7618 34.1679L39.4725 18.4573C40.6929 17.2369 42.6715 17.2369 43.8919 18.4573Z" fill="currentColor" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.66699C15.0736 5.66699 5 15.7406 5 28.167C5 40.5934 15.0736 50.667 27.5 50.667C39.9264 50.667 50 40.5934 50 28.167C50 15.7406 39.9264 5.66699 27.5 5.66699ZM0 28.167C0 12.9792 12.3122 0.666992 27.5 0.666992C42.6878 0.666992 55 12.9792 55 28.167C55 43.3548 42.6878 55.667 27.5 55.667C12.3122 55.667 0 43.3548 0 28.167Z" fill="currentColor" />
        </svg>
      </div>
      <div class="flex-1">
        <h3 class="text-sm font-semibold text-green-700">Successfully saved!</h3>
        <div class="mt-1">
          <p class="text-sm text-green-600">Your changes have been saved successfully. You can view the updated information on the dashboard.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Warning alert -->
<div class="mx-auto w-full max-w-4xl">
  <div class="rounded-lg bg-yellow-50 p-4 ring-1 ring-inset ring-yellow-300">
    <div class="flex items-start gap-x-4">
      <div class="shrink-0">
        <svg aria-hidden="true" class="size-5 text-yellow-500" viewBox="0 0 55 54" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M19.9663 4.54867C23.1584 -1.51623 31.8415 -1.51622 35.0335 4.5487L35.0336 4.54875L54.0083 40.6026C54.0084 40.6029 54.0085 40.6031 54.0087 40.6034C56.993 46.2711 52.8794 53.0796 46.475 53.0796H8.52485C2.11871 53.0796 -1.9923 46.2696 0.991191 40.6006L0.991245 40.6005L19.9663 4.5487C19.9663 4.54869 19.9663 4.54868 19.9663 4.54867ZM30.0114 7.19191C28.9471 5.16965 26.0528 5.16965 24.9884 7.19191L24.9884 7.19193L6.01337 43.2436C6.01336 43.2437 6.01334 43.2437 6.01332 43.2437C5.01859 45.134 6.38982 47.4044 8.52485 47.4044H46.475C48.6115 47.4044 49.9801 45.1331 48.9869 43.2473L48.9865 43.2465L30.0114 7.19191ZM27.4999 16.1907C29.0671 16.1907 30.3375 17.4611 30.3375 19.0283V30.3787C30.3375 31.9459 29.0671 33.2163 27.4999 33.2163C25.9328 33.2163 24.6623 31.9459 24.6623 30.3787V19.0283C24.6623 17.4611 25.9328 16.1907 27.4999 16.1907ZM27.4999 36.0539C29.0671 36.0539 30.3375 37.3244 30.3375 38.8915V38.9199C30.3375 40.4871 29.0671 41.7575 27.4999 41.7575C25.9328 41.7575 24.6623 40.4871 24.6623 38.9199V38.8915C24.6623 37.3244 25.9328 36.0539 27.4999 36.0539Z" fill="currentColor" />
        </svg>
      </div>
      <div class="flex-1">
        <h3 class="text-sm font-semibold text-yellow-700">Something went wrong</h3>
        <div class="mt-1">
          <p class="text-sm text-yellow-600">There was a problem with your request. Please try again later. If the problem persists, please contact support.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Error alert -->
<div class="mx-auto w-full max-w-4xl">
  <div class="rounded-lg bg-red-50 p-4 ring-1 ring-inset ring-red-200">
    <div class="flex items-start gap-x-4">
      <div class="shrink-0">
        <svg aria-hidden="true" class="size-5 text-red-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5C15.0736 5 5 15.0736 5 27.5C5 39.9265 15.0736 50 27.5 50C39.9265 50 50 39.9265 50 27.5C50 15.0736 39.9265 5 27.5 5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM14.6211 14.6211C15.5975 13.6448 17.1804 13.6448 18.1567 14.6211L27.5 23.9645L36.8433 14.6211C37.8197 13.6448 39.4026 13.6448 40.3789 14.6211C41.3552 15.5974 41.3552 17.1803 40.3789 18.1567L31.0355 27.5L40.3789 36.8433C41.3552 37.8197 41.3552 39.4026 40.3789 40.3789C39.4026 41.3552 37.8197 41.3552 36.8433 40.3789L27.5 31.0355L18.1567 40.3789C17.1803 41.3552 15.5974 41.3552 14.6211 40.3789C13.6448 39.4026 13.6448 37.8197 14.6211 36.8433L23.9645 27.5L14.6211 18.1567C13.6448 17.1803 13.6448 15.5974 14.6211 14.6211Z" fill="currentColor" />
        </svg>
      </div>
      <div class="flex-1">
        <h3 class="text-sm font-semibold text-red-700">An error occurred</h3>
        <div class="mt-1">
          <p class="text-sm text-red-600">An unexpected error occurred. Please try again later. If the problem persists, please contact support.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Info alert -->
<div class="mx-auto w-full max-w-4xl">
  <div class="rounded-lg bg-blue-50 p-4 ring-1 ring-inset ring-blue-200">
    <div class="flex items-start gap-x-4">
      <div class="shrink-0">
        <svg aria-hidden="true" class="size-5 text-blue-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
        </svg>
      </div>
      <div class="flex-1">
        <h3 class="text-sm font-semibold text-blue-700">We've released a new feature!</h3>
        <div class="mt-1">
          <p class="text-sm text-blue-600">New feature released that allows you to customize your profile. You can now add a profile picture and a bio to your profile.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Neutral alert -->
<div class="mx-auto w-full max-w-4xl">
  <div class="rounded-lg bg-gray-50 p-4 ring-1 ring-inset ring-gray-200">
    <div class="flex items-start gap-x-4">
      <div class="shrink-0">
        <svg aria-hidden="true" class="size-5 text-gray-500" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M27.5 5.5C15.3497 5.5 5.5 15.3497 5.5 27.5C5.5 39.6504 15.3497 49.5 27.5 49.5C39.6504 49.5 49.5 39.6504 49.5 27.5C49.5 15.3497 39.6504 5.5 27.5 5.5ZM0 27.5C0 12.3122 12.3122 0 27.5 0C42.6879 0 55 12.3122 55 27.5C55 42.6879 42.6879 55 27.5 55C12.3122 55 0 42.6879 0 27.5ZM24.6131 16.5C24.6131 14.9812 25.8443 13.75 27.3631 13.75H27.6369C29.1557 13.75 30.387 14.9812 30.387 16.5V16.775C30.387 18.2916 29.1591 19.522 27.6425 19.525L27.3686 19.5255C26.6383 19.527 25.9374 19.2379 25.4205 18.722C24.9035 18.2062 24.6131 17.5058 24.6131 16.7755V16.5ZM27.5 22C29.0188 22 30.25 23.2312 30.25 24.75V38.5C30.25 40.0188 29.0188 41.25 27.5 41.25C25.9812 41.25 24.75 40.0188 24.75 38.5V24.75C24.75 23.2312 25.9812 22 27.5 22Z" fill="currentColor" />
        </svg>
      </div>
      <div class="flex-1">
        <h3 class="text-sm font-semibold text-gray-700">New update available</h3>
        <div class="mt-1">
          <p class="text-sm text-gray-600">A new update is available for the application. You can now update the application to the latest version.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-4xl text-center">
      <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Pricing plan</h2>
      <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
    </div>
    <div class="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none lg:items-center lg:gap-x-20 lg:ring-0">
      <div class="p-2 lg:w-full lg:max-w-sm lg:shrink-0 lg:p-0">
        <div class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:py-16">
          <div class="mx-auto max-w-xs px-8">
            <p class="text-5xl font-semibold tracking-tight text-gray-900">$49.99</p>
            <h3 id="package-premium" class="mt-4 text-lg font-medium text-gray-900">Premium package</h3>
            <div class="mt-8 h-px bg-gray-900/5"></div>
            <p class="mt-8 text-sm leading-6 text-gray-600">Empowering your brand with standout visuals that leave an impact</p>
            <a href="#" aria-describedby="package-premium" class="mt-8 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
          </div>
        </div>
      </div>
      <div class="-mt-2 p-8 sm:p-10 lg:mt-0 lg:flex-auto lg:p-0">
        <p class="text-4xl font-semibold tracking-tight text-gray-900">Process</p>
        <p class="mt-2 text-sm leading-6 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <ul class="mt-10 *:border-b *:border-gray-100 *:py-6">
          <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
            <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g id="Complete">
                <g id="tick">
                  <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                </g>
              </g>
            </svg>
            <p class="text-sm leading-6 text-gray-600">
              <span class="font-semibold text-gray-900">Discovery Session</span>
              – We delve deep into understanding your brand’s core values, goals, and target audience. Our aim is to align your brand’s identity with its visual representation.
            </p>
          </li>
          <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
            <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g id="Complete">
                <g id="tick">
                  <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                </g>
              </g>
            </svg>
            <p class="text-sm leading-6 text-gray-600">
              <span class="font-semibold text-gray-900">Custom Design Concepts</span>
              – Receive three unique design concepts tailored to your brand, with opportunities for refinement and feedback to ensure the perfect fit.
            </p>
          </li>
          <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
            <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g id="Complete">
                <g id="tick">
                  <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                </g>
              </g>
            </svg>
            <p class="text-sm leading-6 text-gray-600">
              <span class="font-semibold text-gray-900">Deliverables</span>
              – All final design files will be provided, including various formats suitable for both digital and print use. We ensure your brand assets are ready for immediate implementation.
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>