Tailwind CSS Components

Framework

UI Library

Components

Tailwind Component #1281

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 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 w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative px-4 bg-gray-900 border border-gray-800 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-white.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-white.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-white.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-white.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-white.svg" alt="">
          </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1282

Tailwind CSS

Zanrly

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1283

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-800 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 rounded-3xl">
      <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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1284

Tailwind CSS

Zanrly

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1285

Tailwind CSS

Zanrly

<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-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="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-900 font-black tracking-tight">Invest in a better way to work online.</h2>
              <p class="mb-8 text-xl 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-100 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1286

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="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">
            <div class="w-full md:w-1/3 p-8">
              <div class="flex flex-wrap -m-3">
                <div class="w-auto md:w-full lg:w-auto p-3">
                  <div class="flex items-center justify-center w-12 h-12 bg-gray-800 rounded-xl">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1287

Tailwind CSS

Zanrly

<section x-data="{ showContent: false }" class="py-10 bg-white overflow-hidden">
  <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-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-white 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>
          </div>
          <div class="w-full md:w-1/3 p-4">
            <div class="h-full bg-white rounded-3xl">
              <img class="w-full" src="zanrly-assets/images/blog/blog2.png" alt="">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1288

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/3 p-4">
        <div class="flex flex-col justify-end p-10 pt-20 lg:pt-40 bg-gray-800 h-full rounded-3xl">
          <h2 class="font-heading text-3xl text-gray-100 font-bold tracking-tight">
            <span>More than</span>
            <span class="text-4xl font-black text-transparent bg-clip-text bg-gradient-green">16,200</span>
            <span>visitor to customer converted</span>
          </h2>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-4">
        <div class="flex flex-col justify-end p-10 pt-20 lg:pt-40 bg-gray-800 h-full rounded-3xl">
          <h2 class="font-heading text-3xl text-gray-100 font-bold tracking-tight">
            <span>Increased</span>
            <span class="text-4xl font-black text-transparent bg-clip-text bg-gradient-pink">117%</span>
            <span>conversions from the first quater</span>
          </h2>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-4">
        <div class="flex flex-col justify-end p-10 pt-20 lg:pt-40 bg-gray-800 h-full rounded-3xl">
          <h2 class="font-heading text-3xl text-gray-100 font-bold tracking-tight">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1289

Tailwind CSS

Zanrly

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1290

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 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="flex flex-wrap -m-4 mb-14">
          <div class="w-full md:w-1/2 p-4">
            <div class="py-16 px-8 text-center h-full bg-white border border-gray-100 rounded-3xl">
              <div class="flex flex-col justify-between h-full">
                <div class="flex-initial mb-10">
                  <span class="inline-block mb-6 text-sm text-blue-500 font-bold uppercase tracking-widest">Standard</span>
                  <h2 class="font-heading text-5xl md:text-7xl text-gray-900 font-black tracking-tight">
                    <span>$32</span>
                    <span class="text-xl">USD</span>
                  </h2>
                  <p class="text-xl text-gray-400 font-bold">per month, paid annually or $20 paid monthly</p>
                </div>
                <div class="flex-initial">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Start 14 days free trial</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Two-Column Standard Pricing Plan Section with Free Trial CTAs

A light-background pricing section showing two side-by-side Standard plan cards, each with a plan label, large USD price, billing note, and blue "Start 14 days free trial" button. A centered footer line below states no credit card is required.

Tailwind Component #1291

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 border border-gray-800 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <h2 class="font-heading max-w-xl mb-20 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">We make things easy for your business</h2>
        <div class="flex flex-wrap -m-3">
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-gray-100 font-black bg-gray-700 rounded-full">1</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-700 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-100 font-bold">Connect</h3>
              <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/4 p-3">
            <div class="flex flex-wrap items-center -m-3 mb-2">
              <div class="w-auto p-3">
                <div class="flex items-center justify-center w-16 h-16 text-xl text-white font-black bg-blue-500 rounded-full">2</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1292

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1293

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 md:px-16 bg-gray-900 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <img class="mx-auto md:ml-0 rounded-3xl" src="zanrly-assets/images/features/business.png" alt="">
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-md">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Feature</span>
            <h2 class="font-heading mb-4 text-4xl text-gray-100 font-black tracking-tight">
              <span>Let’s track your business</span>
              <span class="text-blue-500">easily!</span>
            </h2>
            <p class="mb-16 text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit.</p>
            <div class="flex flex-wrap -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap px-3 py-2 bg-gray-800 rounded-full">
                  <div class="w-auto mr-2 pt-1">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
                    </svg>
                  </div>
                  <div class="flex-1">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1294

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="px-10 pt-10 pb-6 border border-gray-100 rounded-3xl">
      <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="footerLightBorder1-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>
              </div>
            </div>
          </div>
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Zanrly Footer with Email Signup and Link Columns

A website footer with the Zanrly logo, an email address input with a Get Started button, four link columns (Product, For Developers, Resources, Legal), and a copyright line with the logo at the bottom. The layout is a wide white container with columns spread horizontally.

Tailwind Component #1295

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="px-10 pt-10 pb-6 bg-gray-900 rounded-3xl">
      <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-white.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-200 font-bold bg-gray-700 outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-200 rounded-full" id="footerDarkReverse1-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>
              </div>
            </div>
          </div>
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1296

Tailwind CSS

Zanrly

<section class="py-16 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <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 border border-gray-800 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="#">
                  <img src="zanrly-assets/images/insta-dark.svg" alt="">
                </a>
              </div>
              <div class="w-auto p-1.5">
                <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
                  <img src="zanrly-assets/images/twitter-dark.svg" alt="">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1297

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 md:px-16 overflow-hidden bg-white 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 -m-8">
        <div class="w-full md:w-1/2 p-8">
          <img class="mx-auto md:ml-0 rounded-3xl" src="zanrly-assets/images/features/business.png" alt="">
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-md">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Feature</span>
            <h2 class="font-heading mb-4 text-4xl text-gray-900 font-black tracking-tight">
              <span>Let’s track your business</span>
              <span class="text-blue-500">easily!</span>
            </h2>
            <p class="mb-16 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit.</p>
            <div class="flex flex-wrap -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap px-3 py-2 bg-gray-100 rounded-full">
                  <div class="w-auto mr-2 pt-1">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1298

Tailwind CSS

Zanrly

<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-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="flex flex-wrap -m-4 mb-14">
          <div class="w-full md:w-1/2 p-4">
            <div class="py-16 px-8 text-center h-full bg-gray-100 rounded-3xl">
              <div class="flex flex-col justify-between h-full">
                <div class="flex-initial mb-10">
                  <span class="inline-block mb-6 text-sm text-blue-500 font-bold uppercase tracking-widest">Standard</span>
                  <h2 class="font-heading text-5xl md:text-7xl text-gray-900 font-black tracking-tight">
                    <span>$32</span>
                    <span class="text-xl">USD</span>
                  </h2>
                  <p class="text-xl text-gray-400 font-bold">per month, paid annually or $20 paid monthly</p>
                </div>
                <div class="flex-initial">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Start 14 days free trial</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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Two-Column Standard Pricing Cards with Free Trial CTA

A pricing section showing two identical STANDARD plan cards side by side, each displaying a $32 USD monthly price, annual/monthly billing note, and a blue "Start 14 days free trial" button. A centered text line below states no credit card is required.

Tailwind Component #1299

Tailwind CSS

Zanrly

<section class="py-16 bg-white 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-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.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-900 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-white border border-gray-100 rounded-3xl">
              <div class="flex-initial mb-11">
                <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-900 font-black tracking-tight">John Doe</h3>
                <p class="text-sm text-gray-500 font-bold">Design, Founder</p>
              </div>
              <div class="flex-initial">
                <div class="flex flex-wrap justify-center -m-4">
                  <div class="w-auto p-4">
                    <a class="block" 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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #1300

Tailwind CSS

Zanrly

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

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

Framework

UI Library

Components

Tailwind Component #1281

Get the code for 13,400+ components

Tailwind Component #1282

Get the code for 13,400+ components

Tailwind Component #1283

Get the code for 13,400+ components

Tailwind Component #1284

Get the code for 13,400+ components

Tailwind Component #1285

Get the code for 13,400+ components

Tailwind Component #1286

Get the code for 13,400+ components

Tailwind Component #1287

Get the code for 13,400+ components

Tailwind Component #1288

Get the code for 13,400+ components

Tailwind Component #1289

Get the code for 13,400+ components

Tailwind Component #1290

Get the code for 13,400+ components

Two-Column Standard Pricing Plan Section with Free Trial CTAs

Tailwind Component #1291

Get the code for 13,400+ components

Tailwind Component #1292

Get the code for 13,400+ components

Tailwind Component #1293

Get the code for 13,400+ components

Tailwind Component #1294

Get the code for 13,400+ components

Zanrly Footer with Email Signup and Link Columns

Tailwind Component #1295

Get the code for 13,400+ components

Tailwind Component #1296

Get the code for 13,400+ components

Tailwind Component #1297

Get the code for 13,400+ components

Tailwind Component #1298

Get the code for 13,400+ components

Two-Column Standard Pricing Cards with Free Trial CTA

Tailwind Component #1299

Get the code for 13,400+ components

Tailwind Component #1300

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

From one prompt to production‑ready code

Products

Extensions

UI Components

Company

Support