Tailwind CSS Components

<section class="relative pb-32 md:pb-64 bg-gray-100 overflow-hidden">
  <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
    <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-white.png" alt="">
  </div>
  <div class="container mx-auto px-4">
    <div class="relative mb-16 py-16 px-8 max-w-xl mx-auto bg-white rounded-b-3xl">
      <svg class="absolute top-0 -left-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-424)" fill="#F3F4F6"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 24C24 10.7452 13.2548 0 0 0H24H91H501H568H592C578.745 0 568 10.7452 568 24V162C568 175.255 557.255 186 544 186H48C34.7452 186 24 175.255 24 162V24Z" fill="white"></path>
      </svg>
      <svg class="absolute top-0 -right-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-992)" fill="#F3F4F6"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M-544 24C-544 10.7452 -554.745 0 -568 0H-544H-477H-67H0H24C10.7452 0 0 10.7452 0 24V162C0 175.255 -10.7452 186 -24 186H-520C-533.255 186 -544 175.255 -544 162V24Z" fill="white"></path>
      </svg>
      <img class="mx-auto" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
    </div>
    <div class="relative md:max-w-md mx-auto">
      <div class="mb-10 text-center">
        <h2 class="font-heading mb-4 text-4xl md:text-5xl text-black font-black tracking-tight">Welcome Back</h2>
        <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      </div>
      <form>
        <div class="flex flex-wrap -m-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #1582

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 overflow-hidden bg-gray-800 rounded-3xl">
      <img class="absolute left-1/2 bottom-0 transform -translate-x-1/2" src="zanrly-assets/images/applications/pattern-net-dark-light.svg" alt="">
      <div class="relative z-10">
        <div class="mb-10 max-w-7xl mx-auto">
          <h2 class="font-heading max-w-2xl mx-auto text-center text-4xl md:text-5xl text-white font-black tracking-tight">Manage all from anywhere</h2>
        </div>
        <div class="flex flex-nowrap justify-center items-center -m-8 mb-0">
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone.png" alt="">
          </div>
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone2.png" alt="">
          </div>
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone3.png" alt="">
          </div>
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone.png" alt="">
          </div>
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone2.png" alt="">
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Application Component Generator

Tailwind Component #1583

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 overflow-hidden bg-white border border-gray-100 rounded-3xl">
      <img class="absolute left-1/2 bottom-0 transform -translate-x-1/2" src="zanrly-assets/images/applications/pattern-net-gray.svg" alt="">
      <div class="relative">
        <div class="mb-10 max-w-7xl mx-auto">
          <h2 class="font-heading max-w-2xl mx-auto text-center text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Manage all from anywhere</h2>
        </div>
        <div class="flex flex-nowrap justify-center items-center -m-8 mb-0">
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone.png" alt="">
          </div>
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone2.png" alt="">
          </div>
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone3.png" alt="">
          </div>
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone.png" alt="">
          </div>
          <div class="flex-shrink-0 p-8">
            <img src="zanrly-assets/images/applications/iphone2.png" alt="">
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Application Component Generator

Tailwind Component #1584

<section class="relative pb-24 bg-gray-800 overflow-hidden">
  <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
    <div class="absolute bg-gradient-radial-dark-light w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-dark-light.png" alt="">
  </div>
  <div class="container mx-auto px-4">
    <div class="relative mb-16 py-16 px-8 max-w-xl mx-auto bg-gray-900 rounded-b-3xl">
      <svg class="absolute top-0 -left-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-424)" fill="#1F2937"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 24C24 10.7452 13.2548 0 0 0H24H91H501H568H592C578.745 0 568 10.7452 568 24V162C568 175.255 557.255 186 544 186H48C34.7452 186 24 175.255 24 162V24Z" fill="#111827"></path>
      </svg>
      <svg class="absolute top-0 -right-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-992)" fill="#1F2937"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M-544 24C-544 10.7452 -554.745 0 -568 0H-544H-477H-67H0H24C10.7452 0 0 10.7452 0 24V162C0 175.255 -10.7452 186 -24 186H-520C-533.255 186 -544 175.255 -544 162V24Z" fill="#111827"></path>
      </svg>
      <img class="mx-auto" src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
    </div>
    <div class="relative md:max-w-md mx-auto">
      <div class="mb-10 text-center">
        <h2 class="font-heading mb-4 text-4xl md:text-5xl text-white font-black tracking-tight">Join for free</h2>
        <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
      </div>
      <form>
        <div class="flex flex-wrap -m-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #1585

<section class="relative pb-32 md:pb-64 bg-gray-900 overflow-hidden">
  <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
    <div class="absolute bg-gradient-radial-dark w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-dark.png" alt="">
  </div>
  <div class="container mx-auto px-4">
    <div class="relative mb-16 py-16 px-8 max-w-xl mx-auto bg-gray-900 border border-gray-800 rounded-b-3xl">
      <svg class="absolute top-0 -left-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-425)" fill="#111827"></rect>
        <mask id="path-1-inside-1_953_2758" fill="white">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M23 24C23 10.7452 12.2548 0 -1 0H23H90H500H567H591C577.745 0 567 10.7452 567 24V162C567 175.255 556.255 186 543 186H47C33.7452 186 23 175.255 23 162V24Z"></path>
        </mask>
        <path d="M-1 1C11.7025 1 22 11.2975 22 24H24C24 10.1929 12.8071 -1 -1 -1V1ZM23 -1H-1V1H23V-1ZM90 -1H23V1H90V-1ZM500 -1H90V1H500V-1ZM567 -1H500V1H567V-1ZM591 -1H567V1H591V-1ZM568 24C568 11.2975 578.297 1 591 1V-1C577.193 -1 566 10.1929 566 24H568ZM568 162V24H566V162H568ZM543 187C556.807 187 568 175.807 568 162H566C566 174.703 555.703 185 543 185V187ZM47 187H543V185H47V187ZM22 162C22 175.807 33.1929 187 47 187V185C34.2974 185 24 174.703 24 162H22ZM22 24V162H24V24H22Z" fill="#1F2937" mask="url(#path-1-inside-1_953_2758)"></path>
      </svg>
      <svg class="absolute top-0 -right-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-991)" fill="#111827"></rect>
        <mask id="path-1-inside-1_953_2758" fill="white">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M-543 24C-543 10.7452 -553.745 0 -567 0H-543H-476H-66H1H25C11.7452 0 1 10.7452 1 24V162C1 175.255 -9.74518 186 -23 186H-519C-532.255 186 -543 175.255 -543 162V24Z"></path>
        </mask>
        <path d="M-567 1C-554.297 1 -544 11.2975 -544 24H-542C-542 10.1929 -553.193 -1 -567 -1V1ZM-543 -1H-567V1H-543V-1ZM-476 -1H-543V1H-476V-1ZM-66 -1H-476V1H-66V-1ZM1 -1H-66V1H1V-1ZM25 -1H1V1H25V-1ZM2 24C2 11.2975 12.2975 1 25 1V-1C11.1929 -1 0 10.1929 0 24H2ZM2 162V24H0V162H2ZM-23 187C-9.19287 187 2 175.807 2 162H0C0 174.703 -10.2975 185 -23 185V187ZM-519 187H-23V185H-519V187ZM-544 162C-544 175.807 -532.807 187 -519 187V185C-531.703 185 -542 174.703 -542 162H-544ZM-544 24V162H-542V24H-544Z" fill="#1F2937" mask="url(#path-1-inside-1_953_2758)"></path>
      </svg>
      <img class="mx-auto" src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
    </div>
    <div class="relative md:max-w-md mx-auto">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #1586

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 md:px-16 bg-gray-100 border border-gray-100 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-md">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Feature</span>
            <h2 class="font-heading mb-10 text-4xl text-gray-900 font-black tracking-tight">
              <span>Let’s track your business</span>
              <span class="text-blue-500">easily!</span>
            </h2>
            <div class="flex flex-wrap -m-2.5">
              <div class="w-full p-2.5">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <div class="flex items-center justify-center w-12 h-12 bg-white rounded-xl">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3145C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3147 13.9828 15.4995 13.9955 15.7926C13.9985 15.8621 14 15.9314 14 16Z" fill="#3B82F6"></path>
                        <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>
                        <path d="M22 16C22 19.31 19.31 22 16 22C15.2555 22 14.5393 21.8643 13.8811 21.6141C13.5624 21.4929 13.503 21.0851 13.7248 20.8262C14.8668 19.4938 15.5 17.786 15.5 16C15.5 15.66 15.47 15.32 15.42 15C15.3902 14.8155 15.4844 14.6342 15.6478 14.5437C16.9719 13.8107 18.0532 12.6876 18.727 11.3153C18.8609 11.0427 19.1968 10.923 19.4452 11.0978C20.9863 12.1818 22 13.9755 22 16Z" fill="#3B82F6"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="flex-1 p-3">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #1587

<section class="pb-24 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative mb-16 py-16 px-8 max-w-xl mx-auto bg-gray-100 rounded-b-3xl">
      <svg class="absolute top-0 -left-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-424)" fill="white"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 24C24 10.7452 13.2548 0 0 0H24H91H501H568H592C578.745 0 568 10.7452 568 24V162C568 175.255 557.255 186 544 186H48C34.7452 186 24 175.255 24 162V24Z" fill="#F3F4F6"></path>
      </svg>
      <svg class="absolute top-0 -right-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-992)" fill="white"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M-544 24C-544 10.7452 -554.745 0 -568 0H-544H-477H-67H0H24C10.7452 0 0 10.7452 0 24V162C0 175.255 -10.7452 186 -24 186H-520C-533.255 186 -544 175.255 -544 162V24Z" fill="#F3F4F6"></path>
      </svg>
      <img class="mx-auto" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
    </div>
    <div class="md:max-w-md mx-auto">
      <div class="mb-10 text-center">
        <h2 class="font-heading mb-4 text-4xl md:text-5xl text-black font-black tracking-tight">Join for free</h2>
        <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
      </div>
      <form>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <label class="block mb-2 text-sm text-gray-500 font-bold" for="signUpLightInput2-1">Full Name</label>
            <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpLightInput2-1" type="text" placeholder="First and last name">
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #1588

<section class="py-16 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">How it works</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">All-in-one, next-gen SaaS experience</h2>
          <p class="mb-5 text-gray-700 font-bold">Yearly access to all products with ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Learn more</a></div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="py-16 px-8 bg-gray-100 rounded-3xl">
          <div class="max-w-md mx-auto">
            <div class="flex flex-wrap -m-3">
              <div class="w-full p-3">
                <div class="flex flex-wrap -m-4">
                  <div class="flex flex-col items-center w-auto p-4">
                    <div class="flex items-center justify-center mb-6 w-16 h-16 text-xl text-gray-900 font-black bg-white rounded-full">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3145C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3147 13.9828 15.4995 13.9955 15.7926C13.9985 15.8621 14 15.9314 14 16Z" fill="#3B82F6"></path>
                        <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI How it works Component Generator

Tailwind Component #1589

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-20 px-8 bg-gray-900 border border-gray-800 rounded-3xl">
      <div class="pb-32 md:pb-64 max-w-7xl mx-auto">
        <div class="md:max-w-md mx-auto text-center">
          <img class="mb-32 md:mb-64 mx-auto" src="zanrly-assets/logos/zanrly-logo-small-white2.svg" alt="">
          <h3 class="font-heading text-2xl text-blue-500 font-black tracking-tight">404</h3>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Page not found</h2>
          <p class="mb-6 text-gray-500 font-bold">We’re sorry, the page you requested could not be found. Please go back to the homepage</p>
          <div class="flex flex-wrap justify-center -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Go back to Homepage</a></div>
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-gray-900 font-bold bg-gray-50 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 rounded-full" href="#">Try Again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #1590

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-20 px-8 bg-gray-800 overflow-hidden rounded-3xl">
      <div class="pb-32 md:pb-64 max-w-7xl mx-auto">
        <div class="md:max-w-md mx-auto text-center">
          <img class="mb-32 md:mb-64 mx-auto" src="zanrly-assets/logos/zanrly-logo-small-white2.svg" alt="">
          <h3 class="font-heading text-2xl text-blue-500 font-black tracking-tight">404</h3>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Page not found</h2>
          <p class="mb-6 text-gray-500 font-bold">We’re sorry, the page you requested could not be found. Please go back to the homepage</p>
          <div class="flex flex-wrap justify-center -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Go back to Homepage</a></div>
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-gray-900 font-bold bg-gray-50 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 rounded-full" href="#">Try Again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #1591

<section class="py-20 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-8 lg:-m-16">
      <div class="w-full md:w-1/2 p-8 lg:p-16">
        <div class="p-8 bg-gray-900 rounded-3xl">
          <img class="mb-40" src="zanrly-assets/logos/zanrly-logo-white.svg" alt="">
          <h2 class="font-heading mb-4 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Our Philosophy</h2>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit, quis iaculis velit bibendum a. Maecenas accumsan fermentum nisl.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8 lg:p-16">
        <div class="flex flex-wrap -m-4">
          <div class="w-auto lg:w-1/2 p-4">
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-auto p-2">
                <img class="rounded-3xl" src="zanrly-assets/images/teams/avatar2.png" alt="">
              </div>
              <div class="flex-1 p-2">
                <h3 class="font-heading mb-0.5 text-xl text-gray-100 font-bold">John Doe</h3>
                <p class="text-sm text-gray-700 font-bold">Design, Founder</p>
              </div>
            </div>
          </div>
          <div class="w-auto lg:w-1/2 p-4">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Team Component Generator

Tailwind Component #1592

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-20 px-8 bg-white overflow-hidden border border-gray-100 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/http-codes/pattern-gray.png" alt="">
      </div>
      <div class="relative z-10 pb-32 md:pb-64 max-w-7xl mx-auto">
        <div class="md:max-w-md mx-auto text-center">
          <img class="mb-32 md:mb-64 mx-auto" src="zanrly-assets/logos/zanrly-logo-small.svg" alt="">
          <h3 class="font-heading text-2xl text-blue-500 font-black tracking-tight">404</h3>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Page not found</h2>
          <p class="mb-6 text-gray-500 font-bold">We’re sorry, the page you requested could not be found. Please go back to the homepage</p>
          <div class="flex flex-wrap justify-center -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Go back to Homepage</a></div>
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-gray-900 font-bold bg-gray-50 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 rounded-full" href="#">Try Again</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #1593

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="py-32 px-8 h-full rounded-3xl" style="background-image: url('zanrly-assets/images/newsletter/newsletter.png'); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="relative py-32 px-8 text-center h-full bg-gray-100 overflow-hidden rounded-3xl">
          <img class="absolute w-full bottom-0 left-0" src="zanrly-assets/images/newsletter/pattern-net-white.svg" alt="">
          <div class="relative z-10 max-w-md mx-auto">
            <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Applications</span>
            <h2 class="font-heading mb-8 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Subscribe and receive updates</h2>
            <div class="max-w-sm mx-auto">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:flex-1 p-2">
                  <input class="px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-white outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 rounded-full" id="newsletterLightPatternInput2-1" type="text" placeholder="Email address">
                </div>
                <div class="w-full md:w-auto p-2">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Sign In</a></div>
                  </div>
                </div>
              </div>
            </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Newsletter Component Generator

Tailwind Component #1594

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap -m-8 mb-8">
          <div class="w-full md:w-1/3 p-8">
            <img class="mb-6" src="zanrly-assets/logos/zanrly-logo-small.svg" alt="">
            <p class="text-xl font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit, quis iaculis velit bibendum.</p>
          </div>
          <div class="w-full md:w-1/3 p-8">
            <ul class="md:max-w-max ml-auto">
              <li class="mb-6"><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">Products</a></li>
              <li class="mb-6"><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">About us</a></li>
              <li class="mb-6"><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">Careers</a></li>
              <li class="mb-6"><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">Portfolio</a></li>
              <li><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="w-full md:w-1/3 p-8">
            <ul class="md:max-w-max ml-auto">
              <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-medium" href="#">Docs</a></li>
              <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-medium" href="#">Knowledge Base</a></li>
              <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-medium" href="#">System Status</a></li>
              <li><a class="inline-block text-gray-500 hover:text-gray-600 font-medium" href="#">Security</a></li>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #1595

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-100 border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-12 max-w-lg mx-auto text-center">
          <h2 class="font-heading mb-6 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Grow fast, with us</h2>
          <p class="text-gray-500 font-bold">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
        </div>
        <div class="flex flex-wrap -m-4">
          <div class="w-full md:w-1/2 p-4">
            <div class="py-14 px-8 text-center h-full bg-white rounded-3xl">
              <div class="md:max-w-xs mx-auto">
                <h2 class="font-heading mb-6 text-5xl md:text-6xl lg:text-7xl text-gray-900 font-black tracking-tight">
                  <span class="text-transparent bg-clip-text bg-gradient-green-dark">98%</span>
                </h2>
                <h3 class="font-heading mb-3.5 text-xl text-gray-900 font-bold">Average Satisfaction Rate</h3>
                <p class="text-gray-600 font-bold">Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 p-4">
            <div class="py-14 px-8 text-center h-full bg-white rounded-3xl">
              <div class="md:max-w-xs mx-auto">
                <h2 class="font-heading mb-6 text-5xl md:text-6xl lg:text-7xl text-gray-900 font-black tracking-tight">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #1596

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-100 border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap lg:items-center -m-8">
          <div class="w-full md:w-1/2 p-8">
            <img class="mx-auto md:ml-0 rounded-3xl" src="zanrly-assets/images/testimonials/woman.png" alt="">
          </div>
          <div class="w-full md:w-1/2 p-8">
            <p class="mb-10 text-2xl font-bold">"Had some issues where my site crashed and broke, reached out to Shuffle Editor to see if they could help me fix it. Even though we are 12 hours apart in time, they were quick to reply and helpful/willing to do what is needed to fix the issue."</p>
            <h3 class="font-heading text-2xl text-gray-900 font-black">Monica</h3>
            <p class="text-sm text-gray-500 font-bold">@monicajohnson</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #1597

<section class="pb-32 md:pb-64 bg-gray-100 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative mb-16 py-16 px-8 max-w-xl mx-auto bg-white rounded-b-3xl">
      <svg class="absolute top-0 -left-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-424)" fill="#F3F4F6"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 24C24 10.7452 13.2548 0 0 0H24H91H501H568H592C578.745 0 568 10.7452 568 24V162C568 175.255 557.255 186 544 186H48C34.7452 186 24 175.255 24 162V24Z" fill="white"></path>
      </svg>
      <svg class="absolute top-0 -right-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-992)" fill="#F3F4F6"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M-544 24C-544 10.7452 -554.745 0 -568 0H-544H-477H-67H0H24C10.7452 0 0 10.7452 0 24V162C0 175.255 -10.7452 186 -24 186H-520C-533.255 186 -544 175.255 -544 162V24Z" fill="white"></path>
      </svg>
      <img class="mx-auto" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
    </div>
    <div class="md:max-w-md mx-auto">
      <div class="mb-10 text-center">
        <h2 class="font-heading mb-4 text-4xl md:text-5xl text-black font-black tracking-tight">Welcome Back</h2>
        <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      </div>
      <form>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightReverseInput2-1">Email Address</label>
            <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-white placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightReverseInput2-1" type="email" placeholder="Enter email address">
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #1598

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 overflow-hidden border border-gray-800 rounded-3xl" style="background-image: url('zanrly-assets/images/faq/pattern-dark2.svg'); background-position: bottom; background-repeat: no-repeat;">
      <div class="md:max-w-7xl mx-auto">
        <div class="md:max-w-xl mb-10">
          <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
          <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Got questions? We’re here to help!</h2>
        </div>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="p-10 bg-gray-800 rounded-3xl">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:w-1/2 p-2">
                  <h3 class="font-heading text-xl text-white font-black">Is it really unlimited downloads?</h3>
                </div>
                <div class="w-full md:w-1/2 p-2">
                  <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="p-10 bg-gray-800 rounded-3xl">
              <div class="flex flex-wrap -m-2">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI FAQ Component Generator

Tailwind Component #1599

<section class="py-6 bg-white" x-data="{ mobileNavOpen: false }">
  <div class="container mx-auto px-4">
    <div class="flex items-center justify-between px-6 py-3.5 bg-gray-800 rounded-full">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a href="#">
              <img src="zanrly-assets/logos/zanrly-logo-white.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center justify-center">
              <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Features</a></li>
              <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Solutions</a></li>
              <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Resources</a></li>
              <li><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Pricing</a></li>
            </ul>
          </div>
        </div>
      </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Dark rounded navigation bar with Zanrly logo, centered links, and Get Started button

A dark, pill-shaped top navigation bar displaying the Zanrly logo on the left, Features, Solutions, Resources, and Pricing links centered, and Log In text link plus a blue Get Started call-to-action button on the right. It is a site header for a marketing website.

AI Navigation (horizontal) Component Generator

Tailwind Component #1600