Tailwind CSS Components

<section class="relative pt-6 pb-20 bg-gray-50 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <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="container mx-auto px-4">
      <div class="mb-12">
        <div class="flex items-center justify-between px-6 py-3.5 bg-white 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.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-900 hover:text-gray-700" href="#">Features</a></li>
                  <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Solutions</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 Hero section Component Generator

Tailwind Component #1202

<section class="relative pt-6 pb-20 bg-gray-900 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <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">
    <div class="container mx-auto px-4">
      <div class="mb-12">
        <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>

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 Hero section Component Generator

Tailwind Component #1203

<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-800 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-light w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark-light.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-900 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

Dark FAQ Section with Accordion Questions

A dark-themed FAQ section with a blue eyebrow label, centered heading and supporting text, and four stacked expandable question rows with chevron indicators. A footer line links to a contact page for remaining questions.

AI FAQ Component Generator

Tailwind Component #1204

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-gray-900 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

Dark Split-Screen Sign-Up Form with Benefits Panel

A dark split-screen registration component with a left promotional panel showing a logo, headline, and benefit checklist, and a right form with full name, email, and password fields, a terms checkbox, a primary Sign Up button, and Google and Twitter social sign-in options.

Tailwind Component #1205

<section x-data="{ category: 'design' }" class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-800 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-900 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'all', 'bg-gray-900 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-900 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-900 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'development', 'bg-gray-900 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-900 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'marketing', 'bg-gray-900 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

Open positions job listing with category tabs

A dark-themed careers section with an eyebrow label, centered heading, and category filter pills (All, Design, Development, Marketing). Below, the active Design category shows job cards listing role title, employment type, description, and an Apply Now link.

Tailwind Component #1206

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-gray-100 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-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.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 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>

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

Split-Screen Sign-Up Form with Brand Panel

A split-screen registration component with a white branded left panel containing a heading and feature checklist, and a right-side form with full name, email, password fields, a terms checkbox, a primary Sign Up button, and Google and Twitter sign-in options. The layout uses rounded containers on a light gray background.

Tailwind Component #1207

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-white overflow-hidden rounded-3xl">
      <div class="absolute top-0 left-1/2 min-w-max transform -translate-x-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/faq/pattern-gray.png" alt="">
      </div>
      <div class="relative z-10">
        <div class="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-gray-900 font-black tracking-tight">Got questions? We’re here to help!</h2>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="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-100 rounded-3xl cursor-pointer">
                <div class="flex flex-wrap -m-2">
                  <div class="flex-1 p-2">
                    <h3 class="font-heading text-xl text-gray-900 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-500 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>

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

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-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 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 #1209

<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">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>

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

<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-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-white" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'all', 'hover:bg-gray-800 hover:text-white bg-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 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-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 rounded-full bg-white" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'development', 'hover:bg-gray-800 hover:text-white bg-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 rounded-full bg-white" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'marketing', 'hover:bg-gray-800 hover:text-white bg-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-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

Careers Open Positions Listing with Category Filters

A job listings section headed by a "We are hiring" eyebrow and "Open positions" title, with pill-shaped category filter tabs (All, Design, Development, Marketing) and a vertical list of job cards showing role title, employment type, location, short description, and an Apply Now link.

Tailwind Component #1211

<section class="py-10 bg-gray-50 overflow-hidden" x-data="{ category: 'design' }">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-white 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 #1212

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-gray-800 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-light w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark-light.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-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>

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

<section class="py-10 bg-white overflow-hidden" x-data="{ category: 'design' }">
  <div class="container mx-auto px-4">
    <div class="relative py-16 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/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 #1214

<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">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>

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

<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">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 text-white">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 #1216

<section class="py-10 bg-white overflow-hidden" x-data="{ category: 'design' }">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-100 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-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.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-white" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'all', 'hover:bg-gray-800 hover:text-white bg-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 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-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 rounded-full bg-white" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'development', 'hover:bg-gray-800 hover:text-white bg-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 rounded-full bg-white" :class="{'bg-gray-900 hover:bg-gray-800 text-white': category == 'marketing', 'hover:bg-gray-800 hover:text-white bg-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-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 #1217

<section class="py-10 bg-gray-900 overflow-hidden" x-data="{ category: 'design' }">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 border border-gray-800 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 #1218

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative p-10 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 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 #1219

<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-800 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-light w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark-light.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-900 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'all', 'bg-gray-900 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-900 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-900 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'development', 'bg-gray-900 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-900 hover:bg-white hover:text-gray-900 text-white rounded-full" :class="{'bg-white': category == 'marketing', 'bg-gray-900 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 #1220

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-gray-900 border border-gray-800 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">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 text-white">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