Tailwind CSS Components

<section class="py-10 bg-white overflow-hidden" x-data="{ category: 'design' }">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-white border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <ul class="flex flex-wrap justify-center -m-3 mb-16">
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'all'" class="inline-block px-8 py-3.5 text-lg font-bold rounded-full bg-gray-100" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'all', 'hover:bg-gray-800 hover:text-white bg-gray-100': category !== 'all' }" href="#">All</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'design'" class="inline-block px-8 py-3.5 text-lg font-bold rounded-full bg-gray-900 hover:bg-gray-800 text-white" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'design', 'hover:bg-gray-800 hover:text-white bg-gray-100': category !== 'design' }" href="#">Design</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'development'" class="inline-block px-8 py-3.5 text-lg font-bold rounded-full bg-gray-100" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'development', 'hover:bg-gray-800 hover:text-white bg-gray-100': category !== 'development' }" href="#">Development</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'marketing'" class="inline-block px-8 py-3.5 text-lg font-bold rounded-full bg-gray-100" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'marketing', 'hover:bg-gray-800 hover:text-white bg-gray-100': category !== 'marketing' }" href="#">Marketing</a></li>
        </ul>
        <div class="flex flex-wrap -m-8">
          <div class="w-full md:w-1/4 p-8">
            <h2 class="visibility-item font-heading text-4xl text-gray-900 font-black tracking-tight" x-show="category == 'all'">All</h2>
            <h2 class="font-heading text-4xl text-gray-900 font-black tracking-tight" x-show="category == 'design'">Design</h2>
            <h2 class="visibility-item font-heading text-4xl text-gray-900 font-black tracking-tight" x-show="category == 'development'">Development</h2>
            <h2 class="visibility-item font-heading text-4xl text-gray-900 font-black tracking-tight" x-show="category == 'marketing'">Marketing</h2>
          </div>
          <div class="w-full md:flex-1 p-8">
            <div x-show="category == 'all'" class="visibility-item 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 #1222

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-white overflow-hidden 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/pattern-gray.png" alt="">
      </div>
      <div class="relative flex flex-wrap md:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-20 px-8 lg:px-20 bg-gray-100 rounded-3xl">
            <img class="mb-20 md:mb-40" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
            <h2 class="font-heading mb-20 md:mb-40 text-4xl md:text-5xl text-gray-900 font-black">Sign in and start saving time today.</h2>
            <ul class="max-w-xs">
              <h3 class="font-heading mb-6 text-xl text-gray-500 font-bold">Why should you join us?</h3>
              <li class="flex flex-wrap mb-6">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 font-bold">The best you can do in no time at all, amazing feature goes here</p>
              </li>
              <li class="flex flex-wrap">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>

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 #1223

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-gray-900 border border-gray-800 rounded-3xl">
      <div class="flex flex-wrap md:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-20 px-8 lg:px-20 bg-gray-800 rounded-3xl">
            <img class="mb-20 md:mb-40" src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
            <h2 class="font-heading mb-20 md:mb-40 text-4xl md:text-5xl text-white font-black">Create an account and get started.</h2>
            <ul class="max-w-xs">
              <h3 class="font-heading mb-6 text-xl text-gray-500 font-bold">Why should you join us?</h3>
              <li class="flex flex-wrap mb-6">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 text-white font-bold">The best you can do in no time at all, amazing feature goes here</p>
              </li>
              <li class="flex flex-wrap">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 text-white font-bold">24/7 Support of our dedicated, highly professional team</p>
              </li>
            </ul>
          </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 #1224

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-gray-800 rounded-3xl">
      <div class="flex flex-wrap md:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-20 px-8 lg:px-20 bg-gray-900 rounded-3xl">
            <img class="mb-20 md:mb-40" src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
            <h2 class="font-heading mb-20 md:mb-40 text-4xl md:text-5xl text-white font-black">Create an account and get started.</h2>
            <ul class="max-w-xs">
              <h3 class="font-heading mb-6 text-xl text-gray-500 font-bold">Why should you join us?</h3>
              <li class="flex flex-wrap mb-6">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 text-white font-bold">The best you can do in no time at all, amazing feature goes here</p>
              </li>
              <li class="flex flex-wrap">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 text-white font-bold">24/7 Support of our dedicated, highly professional team</p>
              </li>
            </ul>
          </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 #1225

<section class="py-10 bg-gray-800 overflow-hidden" x-data="{ category: 'design' }">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <ul class="flex flex-wrap justify-center -m-3 mb-16">
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'all'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-800 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'all', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'all' }" href="#">All</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'design'" class="inline-block px-8 py-3.5 text-lg font-bold bg-white rounded-full" :class="{'bg-white': category == 'design', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'design' }" href="#">Design</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'development'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-800 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'development', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'development' }" href="#">Development</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'marketing'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-800 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'marketing', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'marketing' }" href="#">Marketing</a></li>
        </ul>
        <div class="flex flex-wrap -m-8">
          <div class="w-full md:w-1/4 p-8">
            <h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'all'">All</h2>
            <h2 class="font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'design'">Design</h2>
            <h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'development'">Development</h2>
            <h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'marketing'">Marketing</h2>
          </div>
          <div class="w-full md:flex-1 p-8">
            <div x-show="category == 'all'" class="visibility-item 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 #1226

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-white rounded-3xl">
      <div class="flex flex-wrap md:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-20 px-8 lg:px-20 bg-gray-100 rounded-3xl">
            <img class="mb-20 md:mb-40" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
            <h2 class="font-heading mb-20 md:mb-40 text-4xl md:text-5xl text-gray-900 font-black">Create an account and get started.</h2>
            <ul class="max-w-xs">
              <h3 class="font-heading mb-6 text-xl text-gray-500 font-bold">Why should you join us?</h3>
              <li class="flex flex-wrap mb-6">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 font-bold">The best you can do in no time at all, amazing feature goes here</p>
              </li>
              <li class="flex flex-wrap">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 font-bold">24/7 Support of our dedicated, highly professional team</p>
              </li>
            </ul>
          </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 #1227

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 overflow-hidden border border-gray-800 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-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative mb-10 md:max-w-xl mx-auto text-center">
        <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
        <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Got questions? We’re here to help!</h2>
        <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      </div>
      <div class="relative max-w-3xl mx-auto">
        <div class="flex flex-wrap -m-3 mb-10">
          <div class="w-full p-3">
            <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-800 rounded-3xl cursor-pointer">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="font-heading text-xl text-white font-black">Do you provide any free plan?</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                      <p class="text-gray-400 font-bold mt-4">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                  </div>
                </div>
                <div class="w-auto p-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 #1228

<section class="py-10 bg-gray-800 overflow-hidden" x-data="{ category: 'design' }">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 overflow-hidden 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-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <ul class="flex flex-wrap justify-center -m-3 mb-16">
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'all'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-800 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'all', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'all' }" href="#">All</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'design'" class="inline-block px-8 py-3.5 text-lg font-bold bg-white rounded-full" :class="{'bg-white': category == 'design', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'design' }" href="#">Design</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'development'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-800 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'development', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'development' }" href="#">Development</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'marketing'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-800 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'marketing', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'marketing' }" href="#">Marketing</a></li>
        </ul>
        <div class="flex flex-wrap -m-8">
          <div class="w-full md:w-1/4 p-8">
            <h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'all'">All</h2>
            <h2 class="font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'design'">Design</h2>
            <h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'development'">Development</h2>

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 #1229

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-gray-900 overflow-hidden 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-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative flex flex-wrap md:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-20 px-8 lg:px-20 bg-gray-800 rounded-3xl">
            <img class="mb-20 md:mb-40" src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
            <h2 class="font-heading mb-20 md:mb-40 text-4xl md:text-5xl text-white font-black">Create an account and get started.</h2>
            <ul class="max-w-xs">
              <h3 class="font-heading mb-6 text-xl text-gray-500 font-bold">Why should you join us?</h3>
              <li class="flex flex-wrap mb-6">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 text-white font-bold">The best you can do in no time at all, amazing feature goes here</p>
              </li>
              <li class="flex flex-wrap">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>

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 #1230

<section class="py-10 bg-gray-900 overflow-hidden" x-data="{ category: 'design' }">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 overflow-hidden border border-gray-800 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-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <ul class="flex flex-wrap justify-center -m-3 mb-16">
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'all'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-800 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'all', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'all' }" href="#">All</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'design'" class="inline-block px-8 py-3.5 text-lg font-bold bg-white rounded-full" :class="{'bg-white': category == 'design', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'design' }" href="#">Design</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'development'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-800 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'development', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'development' }" href="#">Development</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'marketing'" class="inline-block px-8 py-3.5 text-lg font-bold bg-gray-800 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'marketing', 'bg-gray-800 hover:bg-white hover:text-gray-900 text-white': category !== 'marketing' }" href="#">Marketing</a></li>
        </ul>
        <div class="flex flex-wrap -m-8">
          <div class="w-full md:w-1/4 p-8">
            <h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'all'">All</h2>
            <h2 class="font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'design'">Design</h2>
            <h2 class="visibility-item font-heading text-4xl text-white font-black tracking-tight" x-show="category == 'development'">Development</h2>

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 #1231

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative p-10 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/pattern-gray.png" alt="">
      </div>
      <div class="relative flex flex-wrap md:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-20 px-8 lg:px-20 bg-white border border-gray-100 rounded-3xl">
            <img class="mb-20 md:mb-40" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
            <h2 class="font-heading mb-20 md:mb-40 text-4xl md:text-5xl text-gray-900 font-black">Sign in and start saving time today.</h2>
            <ul class="max-w-xs">
              <h3 class="font-heading mb-6 text-xl text-gray-500 font-bold">Why should you join us?</h3>
              <li class="flex flex-wrap mb-6">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 font-bold">The best you can do in no time at all, amazing feature goes here</p>
              </li>
              <li class="flex flex-wrap">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>

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 #1232

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 overflow-hidden border border-gray-800 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-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative mb-10 md:max-w-xl mx-auto text-center">
        <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
        <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Got questions? We’re here to help!</h2>
        <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      </div>
      <div class="relative max-w-3xl mx-auto">
        <div class="flex flex-wrap -m-3 mb-10">
          <div class="w-full p-3">
            <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-800 rounded-3xl cursor-pointer">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="font-heading text-xl text-white font-black">Do you provide any free plan?</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                      <p class="text-gray-400 mt-4 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 class="w-auto p-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 #1233

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-white border border-gray-100 rounded-3xl">
      <div class="flex flex-wrap md:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-20 px-8 lg:px-20 bg-white border border-gray-100 rounded-3xl">
            <img class="mb-20 md:mb-40" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
            <h2 class="font-heading mb-20 md:mb-40 text-4xl md:text-5xl text-gray-900 font-black">Create an account and get started.</h2>
            <ul class="max-w-xs">
              <h3 class="font-heading mb-6 text-xl text-gray-500 font-bold">Why should you join us?</h3>
              <li class="flex flex-wrap mb-6">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 font-bold">The best you can do in no time at all, amazing feature goes here</p>
              </li>
              <li class="flex flex-wrap">
                <svg class="w-auto mr-2.5" width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 23C18.0228 23 22.5 18.5228 22.5 13C22.5 7.47715 18.0228 3 12.5 3C6.97715 3 2.5 7.47715 2.5 13C2.5 18.5228 6.97715 23 12.5 23ZM17.1339 11.3839C17.622 10.8957 17.622 10.1043 17.1339 9.61612C16.6457 9.12796 15.8543 9.12796 15.3661 9.61612L11.25 13.7322L9.63388 12.1161C9.14573 11.628 8.35427 11.628 7.86612 12.1161C7.37796 12.6043 7.37796 13.3957 7.86612 13.8839L10.3661 16.3839C10.8543 16.872 11.6457 16.872 12.1339 16.3839L17.1339 11.3839Z" fill="#3B82F6"></path>
                </svg>
                <p class="flex-1 font-bold">24/7 Support of our dedicated, highly professional team</p>
              </li>
            </ul>
          </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 #1234

<section class="py-10 bg-gray-50 overflow-hidden" x-data="{ category: 'design' }">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-white overflow-hidden 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/pattern-gray.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Open positions</h2>
          <p class="md:max-w-md mx-auto text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <ul class="flex flex-wrap justify-center -m-3 mb-16">
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'all'" class="inline-block px-8 py-3.5 text-lg font-bold rounded-full bg-gray-100" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'all', 'hover:bg-gray-800 hover:text-white bg-gray-100': category !== 'all' }" href="#">All</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'design'" class="inline-block px-8 py-3.5 text-lg font-bold rounded-full bg-gray-900 hover:bg-gray-800 text-white" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'design', 'hover:bg-gray-800 hover:text-white bg-gray-100': category !== 'design' }" href="#">Design</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'development'" class="inline-block px-8 py-3.5 text-lg font-bold rounded-full bg-gray-100" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'development', 'hover:bg-gray-800 hover:text-white bg-gray-100': category !== 'development' }" href="#">Development</a></li>
          <li class="w-auto p-3"><a x-on:click.prevent="category = 'marketing'" class="inline-block px-8 py-3.5 text-lg font-bold rounded-full bg-gray-100" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'marketing', 'hover:bg-gray-800 hover:text-white bg-gray-100': category !== 'marketing' }" href="#">Marketing</a></li>
        </ul>
        <div class="flex flex-wrap -m-8">
          <div class="w-full md:w-1/4 p-8">
            <h2 class="visibility-item font-heading text-4xl text-gray-900 font-black tracking-tight" x-show="category == 'all'">All</h2>
            <h2 class="font-heading text-4xl text-gray-900 font-black tracking-tight" x-show="category == 'design'">Design</h2>
            <h2 class="visibility-item font-heading text-4xl text-gray-900 font-black tracking-tight" x-show="category == 'development'">Development</h2>

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 #1235

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="px-4 bg-white border border-gray-100 rounded-3xl">
      <div class="flex flex-wrap items-center py-11 -m-8">
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand3.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand4.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand5.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand6.svg" alt="">
        </div>
        <div class="w-full sm:w-1/3 lg:w-1/6 p-8">
          <img class="mx-auto" src="zanrly-assets/brands/brand2.svg" alt="">
        </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

Logo Strip Showing Six Placeholder Company Logos

A horizontal row of six placeholder "Logoipsum" company logos inside a light rounded container with a faint border, used to display partner or client logos as social proof. The last logo is cropped at the right edge, suggesting an overflowing carousel or marquee.

AI Logo clouds Component Generator

Tailwind Component #1236

<section class="py-16 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative">
      <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="relative">
        <div class="mb-16 max-w-xl mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Our team</span>
          <h2 class="font-heading text-4xl md:text-5xl text-gray-100 font-black tracking-tight">The brain behind Zanrly</h2>
        </div>
        <div class="flex flex-wrap -m-4">
          <div class="w-full md:w-1/3 p-4">
            <div class="flex flex-col justify-between px-8 pt-10 pb-12 h-full text-center bg-gray-900 rounded-3xl">
              <div class="flex-initial mb-8">
                <img class="mb-8 mx-auto rounded-3xl" src="zanrly-assets/images/teams/avatar.png" alt="">
                <h3 class="font-heading mb-2 text-2xl text-gray-100 font-black tracking-tight">John Doe</h3>
                <p class="text-sm text-gray-700 font-bold">Design, Founder</p>
              </div>
              <div class="flex-initial">
                <div class="flex flex-wrap justify-center -m-1.5">
                  <div class="w-auto p-1.5">
                    <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">

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 Team Member Card Grid with Social Links

A dark-themed "Our Team" section showing three identical team member cards in a row, each with a portrait photo, name, role, and social media icon buttons. Section heading and eyebrow label sit centered above the grid.

AI Team Component Generator

Tailwind Component #1237

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 overflow-hidden 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-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="flex flex-wrap -m-8 mb-10">
          <div class="w-full md:w-1/2 p-8">
            <div class="md:max-w-lg">
              <h2 class="font-heading mb-6 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Invest in a better way to work online.</h2>
              <p class="mb-8 text-xl 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 class="flex flex-wrap -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="#">Get Started</a></div>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 p-8">
            <img class="mx-auto md:mr-0 rounded-3xl" src="zanrly-assets/images/features/invest.png" alt="">
          </div>
        </div>
        <div class="p-8 md:p-12 bg-gray-800 rounded-3xl">
          <div class="flex flex-wrap -m-8">

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 Hero Section with Heading, CTA, Laptop Image, and Three-Feature Strip

A dark promotional hero section with a large two-line heading, body text, and a blue Get Started button on the left, paired with a laptop-on-desk photo on the right. A rounded feature strip below presents three icon-led items with headings and short supporting text.

AI Call to action Component Generator

Tailwind Component #1238

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative px-10 pt-10 pb-6 bg-gray-100 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-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.png" alt="">
      </div>
      <div class="relative">
        <div class="flex flex-wrap items-center justify-between mb-10 -m-4">
          <div class="w-full md:w-1/2 p-4">
            <a class="inline-block" href="#">
              <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
            </a>
          </div>
          <div class="w-full md:w-1/2 p-4">
            <div class="md:max-w-md ml-auto">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-full md:flex-1 p-1.5">
                  <input class="px-4 py-2.5 w-full text-sm text-gray-500 font-bold bg-white outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 border border-gray-200 rounded-full" id="footerLightPattern1-1" type="text" placeholder="Email address">
                </div>
                <div class="w-full md:w-auto p-1.5">
                  <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="#">Get Started</a></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

Zanrly Footer with Email Signup and Link Columns

A light gray footer section with the Zanrly logo and an email signup input with a blue Get Started button at the top, followed by a white card containing four link columns (Product, For Developers, Resources, Legal) and a copyright line with logo at the bottom.

AI Footers Component Generator

Tailwind Component #1239

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative px-8 pt-16 md:pb-16 lg:pt-40 lg:pb-44 bg-gray-900 border border-gray-800 rounded-3xl" style="background-image: url('zanrly-assets/images/applications/pattern-net2-dark.svg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
      <div class="relative max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center -m-8">
          <div class="w-full md:w-1/2 p-8 mb-16 md:mb-0">
            <div class="md:max-w-xl">
              <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Applications</span>
              <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Start with ease, Grow your business</h2>
              <p class="mb-6 text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
              <a class="inline-block" href="#">
                <img src="zanrly-assets/images/applications/app-store.svg" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
      <img class="md:absolute md:bottom-0 md:right-0 xl:right-28 md:w-1/2 lg:w-auto mx-auto md:mr-0" src="zanrly-assets/images/applications/smartphone.png" alt="">
    </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

Dark App Promotion Hero with Phone Mockup and App Store Badge

A dark-background marketing hero section with a small blue eyebrow label, a bold two-line heading, supporting paragraph text, and an App Store download badge on the left. A phone mockup held by a hand, showing a lock screen with a music playback card, occupies the right side.

AI Application Component Generator

Tailwind Component #1240