UI Components in Zanrly library

Framework

UI Library

Components

Tailwind Component #61

Tailwind CSS

Zanrly

<section class="relative pt-6 pb-20 bg-white 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-white w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-gray.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 border border-gray-100 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

Tailwind Component #62

Tailwind CSS

Zanrly

<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-900 border border-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

Tailwind Component #63

Tailwind CSS

Zanrly

<section class="pt-6 pb-20 bg-gray-800 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <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-900 rounded-full">
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto">
              <a href="#">
                <img src="zanrly-assets/logos/zanrly-logo-white.svg" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto hidden lg:block">
              <ul class="flex items-center justify-center">
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Features</a></li>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Solutions</a></li>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Resources</a></li>
                <li><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Pricing</a></li>
              </ul>
            </div>
          </div>

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

Tailwind CSS

Zanrly

<section class="pt-6 pb-20 bg-white overflow-hidden" x-data="{ mobileNavOpen: false }">
  <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-100 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>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Resources</a></li>
                <li><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Pricing</a></li>
              </ul>
            </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

Tailwind Component #65

Tailwind CSS

Zanrly

<section class="pt-6 pb-20 bg-gray-900 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <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-900 border border-gray-800 rounded-full">
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto">
              <a href="#">
                <img src="zanrly-assets/logos/zanrly-logo-white.svg" alt="">
              </a>
            </div>
          </div>
        </div>
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto hidden lg:block">
              <ul class="flex items-center justify-center">
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Features</a></li>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Solutions</a></li>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Resources</a></li>
                <li><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Pricing</a></li>
              </ul>
            </div>
          </div>

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

Tailwind CSS

Zanrly

<section class="pt-6 pb-20 bg-white overflow-hidden" x-data="{ mobileNavOpen: false }">
  <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 border border-gray-100 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>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Resources</a></li>
                <li><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Pricing</a></li>
              </ul>
            </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

Tailwind Component #67

Tailwind CSS

Zanrly

<section class="relative pt-6 pb-20 bg-gray-800 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-light w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-dark-light.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-900 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

Tailwind Component #68

Tailwind CSS

Zanrly

<section class="pt-6 pb-20 bg-gray-900 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <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>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Resources</a></li>
                <li><a class="inline-block text-sm font-bold text-gray-200 hover:text-gray-300" href="#">Pricing</a></li>
              </ul>
            </div>
          </div>

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

Tailwind CSS

Zanrly

<section class="relative pt-6 pb-20 bg-white 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-white w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-gray.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-100 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

Tailwind Component #70

Tailwind CSS

Zanrly

<section class="pt-6 pb-20 bg-gray-50 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <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>
                <li class="mr-9"><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Resources</a></li>
                <li><a class="inline-block text-sm font-bold text-gray-900 hover:text-gray-700" href="#">Pricing</a></li>
              </ul>
            </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

Tailwind Component #71

Tailwind CSS

Zanrly

<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

Tailwind Component #72

Tailwind CSS

Zanrly

<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

Tailwind Component #73

Tailwind CSS

Zanrly

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

Tailwind Component #74

Tailwind CSS

Zanrly

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

Tailwind Component #75

Tailwind CSS

Zanrly

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

Tailwind Component #76

Tailwind CSS

Zanrly

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

Tailwind Component #77

Tailwind CSS

Zanrly

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

Tailwind Component #78

Tailwind CSS

Zanrly

<section x-data="{ showContent: false }" 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-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-12 md:max-w-4xl mx-auto text-center">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Blog</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Resources and stories center</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>
        <div class="flex flex-wrap -m-4 mb-6">
          <div class="w-full md:w-1/3 p-4">
            <div class="h-full bg-gray-100 rounded-3xl">
              <img class="w-full" src="zanrly-assets/images/blog/blog.png" alt="">
              <div class="p-8">
                <a class="group inline-block mb-4" href="#">
                  <h3 class="font-heading text-2xl text-gray-900 hover:text-gray-700 group-hover:underline font-black">You will never believe these bizarre truth of travel.</h3>
                </a>
                <p class="text-sm text-gray-500 font-bold">Design process • 4 min read</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

Blog Resources Section with Three Article Cards

A light-background blog preview section with a small blue eyebrow label, a bold centered heading, a short intro paragraph, three article cards with photos, titles, and category/read-time metadata, and a dark pill-shaped call-to-action button below.

Tailwind Component #79

Tailwind CSS

Zanrly

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

Tailwind Component #80

Tailwind CSS

Zanrly

<section class="py-10 bg-white 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-100 border border-gray-100 rounded-3xl" style="background-image: url('zanrly-assets/images/applications/pattern-net2-gray.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-gray-900 font-black tracking-tight">Start with ease, Grow your business</h2>
              <p class="mb-6 text-gray-500 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

Split-screen app promo hero with App Store badge and phone mockup

A light marketing hero section with an eyebrow label, large two-line heading, body copy, and a black App Store download button on the left, with a hand-held phone mockup showing a lock screen and media player on the right. The layout is a split-screen composition promoting an app download.

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

UI Components – Zanrly Library

Framework

UI Library

Components

Tailwind Component #61

Get the code for 13,400+ components

Tailwind Component #62

Get the code for 13,400+ components

Tailwind Component #63

Get the code for 13,400+ components

Tailwind Component #64

Get the code for 13,400+ components

Tailwind Component #65

Get the code for 13,400+ components

Tailwind Component #66

Get the code for 13,400+ components

Tailwind Component #67

Get the code for 13,400+ components

Tailwind Component #68

Get the code for 13,400+ components

Tailwind Component #69

Get the code for 13,400+ components

Tailwind Component #70

Get the code for 13,400+ components

Tailwind Component #71

Get the code for 13,400+ components

Tailwind Component #72

Get the code for 13,400+ components

Tailwind Component #73

Get the code for 13,400+ components

Dark Team Member Card Grid with Social Links

Tailwind Component #74

Get the code for 13,400+ components

Logo Strip Showing Six Placeholder Company Logos

Tailwind Component #75

Get the code for 13,400+ components

Dark Hero Section with Heading, CTA, Laptop Image, and Three-Feature Strip

Tailwind Component #76

Get the code for 13,400+ components

Zanrly Footer with Email Signup and Link Columns

Tailwind Component #77

Get the code for 13,400+ components

Dark FAQ Section with Accordion Questions

Tailwind Component #78

Get the code for 13,400+ components

Blog Resources Section with Three Article Cards

Tailwind Component #79

Get the code for 13,400+ components

Dark App Promotion Hero with Phone Mockup and App Store Badge

Tailwind Component #80

Get the code for 13,400+ components

Split-screen app promo hero with App Store badge and phone mockup

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support