Tailwind CSS Components

Framework

UI Library

Lifetime Access

Full Shuffle access forever for $249

Pay once, ship unlimited projects. No subscription, no renewals, all future updates included.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #1681

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-gray-900 overflow-hidden border border-gray-800 rounded-3xl">
      <div class="flex flex-wrap items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <img src="zanrly-assets/images/http-codes/work.png" alt="">
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-md mx-auto">
            <h3 class="font-heading text-2xl text-blue-500 font-black tracking-tight">Error 404</h3>
            <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">This page doesn’t exist</h2>
            <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>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #1682

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-100 overflow-hidden border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-3xl">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Contact Us</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Want to reach out directly?</h2>
          <p class="md:max-w-md text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="mb-6 p-10 bg-white border border-gray-100 rounded-3xl">
          <div class="flex flex-wrap -m-3 mb-3">
            <div class="w-auto p-3">
              <div class="flex items-center justify-center w-16 h-16 mx-auto bg-gray-100 rounded-xl">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.666 21.3334C18.666 23.6934 17.6393 25.8267 15.9993 27.2801C14.586 28.5601 12.7193 29.3334 10.666 29.3334C6.25268 29.3334 2.66602 25.7467 2.66602 21.3334C2.66602 18.6338 4.01797 16.2419 6.07321 14.7965C6.40413 14.5638 6.85175 14.723 7.03033 15.086C8.28888 17.6443 10.6049 19.56 13.3593 20.3067C14.1993 20.5467 15.0793 20.6667 15.9993 20.6667C16.649 20.6667 17.2713 20.6051 17.8759 20.4917C18.2604 20.4196 18.6431 20.666 18.66 21.0568C18.664 21.1495 18.666 21.2419 18.666 21.3334Z" fill="#3B82F6"></path>
                  <path d="M24 10.6666C24 11.7066 23.8 12.7066 23.44 13.6133C22.52 15.9333 20.5467 17.72 18.1067 18.3866C17.44 18.5733 16.7333 18.6666 16 18.6666C15.2667 18.6666 14.56 18.5733 13.8933 18.3866C11.4533 17.72 9.48 15.9333 8.56 13.6133C8.2 12.7066 8 11.7066 8 10.6666C8 6.25329 11.5867 2.66663 16 2.66663C20.4133 2.66663 24 6.25329 24 10.6666Z" fill="#3B82F6"></path>
                  <path d="M29.3327 21.3334C29.3327 25.7467 25.746 29.3334 21.3327 29.3334C20.34 29.3334 19.3851 29.1524 18.5075 28.8188C18.0826 28.6573 18.0033 28.1135 18.2991 27.7683C19.8218 25.9918 20.666 23.7147 20.666 21.3334C20.666 20.8801 20.626 20.4267 20.5593 20.0001V20.0001C20.5197 19.7541 20.6452 19.5123 20.8631 19.3917C22.6286 18.4143 24.0702 16.9168 24.9687 15.0871C25.1472 14.7237 25.5951 14.5641 25.9263 14.797C27.9811 16.2425 29.3327 18.6341 29.3327 21.3334Z" fill="#3B82F6"></path>
                </svg>
              </div>
            </div>
            <div class="flex-1 p-3">
              <p class="text-gray-500 font-bold">Address</p>
              <h3 class="font-heading text-xl text-gray-900 font-black">380 St Killda Road, Mellbourne VIC 3004, Australia</h3>
            </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 Contact Component Generator

Tailwind Component #1683

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 text-center bg-blue-500 rounded-3xl">
      <div class="md:max-w-lg mx-auto">
        <h2 class="font-heading mb-6 text-4xl md:text-5xl text-white font-black tracking-tight">Invest in a better way to work online.</h2>
        <p class="mb-10 text-xl text-blue-100 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 justify-center -m-2 mb-4">
          <div class="w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-gray-900 hover:bg-gray-800 focus:ring-4 focus:ring-gray-600 rounded-full" href="#">Get Started Now</a></div>
        </div>
        <p class="text-xs text-blue-100">No credit card required.</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

AI Call to action Component Generator

Tailwind Component #1684

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="max-w-lg mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Testimonials</span>
          <h2 class="font-heading mb-12 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Our customer says</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-12 pb-8 h-full text-center bg-gray-800 rounded-3xl">
              <div class="flex-initial mb-8">
                <img class="mb-6 mx-auto rounded-full" src="zanrly-assets/images/testimonials/avatar2.png" alt="">
                <p class="text-base text-gray-500 font-bold">Had some issues where my site crashed and broke, reached out to Shuffle Editor to see if they could help me fix it.</p>
              </div>
              <div class="flex-initial">
                <h3 class="font-heading text-2xl text-gray-100 font-black">Monica Johnson</h3>
                <p class="text-sm text-gray-700 font-bold">@monicajonhson</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 Testimonials Component Generator

Tailwind Component #1685

Tailwind CSS

Zanrly

<section class="py-14 pb-10 bg-gray-100 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="p-8 h-full bg-white border border-gray-100 rounded-3xl">
          <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">16,200</h2>
          <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Satisfied clients</h3>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="p-8 h-full bg-white border border-gray-100 rounded-3xl">
          <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">4.7M+</h2>
          <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Downloads</h3>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="p-8 h-full bg-white border border-gray-100 rounded-3xl">
          <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">21,370</h2>
          <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Customer Reviews</h3>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</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 Stats Component Generator

Tailwind Component #1686

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="pt-16 pb-24 md:max-w-3xl mx-auto bg-gray-900 rounded-3xl">
      <img class="mb-14 mx-auto" src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
      <div class="md:max-w-md mx-auto">
        <div class="mb-10 text-center">
          <h2 class="font-heading mb-4 text-4xl md:text-5xl text-white font-black tracking-tight">Join for free</h2>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
        </div>
        <form>
          <div class="flex flex-wrap -m-3">
            <div class="w-full p-3">
              <label class="block mb-2 text-sm text-gray-500 font-bold" for="signUpDarkReverseInput3-1">Full Name</label>
              <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-800 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpDarkReverseInput3-1" type="text" placeholder="First and last name">
            </div>
            <div class="w-full p-3">
              <label class="block mb-2 text-sm text-gray-500 font-bold" for="signUpDarkReverseInput3-2">Email Address</label>
              <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-800 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpDarkReverseInput3-2" type="email" placeholder="Enter email address">
            </div>
            <div class="w-full p-3">
              <label class="block mb-2 text-sm text-gray-500 font-bold" for="signUpDarkReverseInput3-3">Password</label>
              <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-800 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpDarkReverseInput3-3" type="password" placeholder="***************">
            </div>
            <div class="w-full p-3">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Tailwind Component #1687

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 mb-8 bg-white rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center justify-between -m-4">
          <div class="w-auto p-4">
            <a class="inline-block" href="#">
              <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-4">
            <ul class="-m-6">
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Products</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">About Us</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Careers</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Portfolio</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="w-auto p-4">
            <div class="flex flex-wrap -m-4">
              <div class="w-auto p-4">
                <a class="block" href="#">
                  <img src="zanrly-assets/images/insta.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

AI Footers Component Generator

Tailwind Component #1688

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="pt-16 pb-24 md:pb-52 md:max-w-3xl mx-auto bg-gray-800 rounded-3xl">
      <img class="mb-24 mx-auto" src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
      <div class="md:max-w-md mx-auto">
        <div class="mb-10 text-center">
          <h2 class="font-heading mb-4 text-4xl md:text-5xl text-white font-black tracking-tight">Welcome Back</h2>
          <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
        </div>
        <form>
          <div class="flex flex-wrap -m-3">
            <div class="w-full p-3">
              <label class="block mb-2 text-sm text-gray-400 font-bold" for="signInDarkInput3-1">Email Address</label>
              <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-900 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInDarkInput3-1" type="email" placeholder="Enter email address">
            </div>
            <div class="w-full p-3">
              <label class="block mb-2 text-sm text-gray-400 font-bold" for="signInDarkInput3-2">Password</label>
              <div class="border border-gray-700 overflow-hidden rounded-full focus-within:ring-4 focus-within:ring-blue-200">
                <div class="flex flex-wrap">
                  <div class="flex-1">
                    <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-900 placeholder-gray-500 outline-none" id="signInDarkInput3-2" type="password" placeholder="*************">
                  </div>
                  <div class="w-auto"><a class="flex items-center pr-4 text-blue-500 hover:text-blue-600 h-full bg-gray-900 font-bold" href="#">Forgot password?</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

AI Sign in / Sign up Component Generator

Tailwind Component #1689

Tailwind CSS

Zanrly

<section class="py-14 pb-10 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 flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="p-8 h-full bg-gray-900 border border-gray-800 rounded-3xl">
            <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">16,200</h2>
            <h3 class="font-heading mb-2 text-xl text-gray-300 font-bold">Satisfied clients</h3>
            <p class="text-gray-600 font-bold">Lorem ipsum dolor sit amet</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="p-8 h-full bg-gray-900 border border-gray-800 rounded-3xl">
            <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">4.7M+</h2>
            <h3 class="font-heading mb-2 text-xl text-gray-300 font-bold">Downloads</h3>
            <p class="text-gray-600 font-bold">Lorem ipsum dolor sit amet</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="p-8 h-full bg-gray-900 border border-gray-800 rounded-3xl">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #1690

Tailwind CSS

Zanrly

<section class="py-16 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-lg mx-auto text-center">
      <h2 class="font-heading max-w-xl mb-4 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Process how it works</h2>
      <p class="mb-12 text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros.</p>
    </div>
    <div class="py-16 px-8 md:px-16 overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/how-it-works/work.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
      <div class="max-w-md">
        <div class="flex flex-wrap">
          <div class="w-full">
            <div class="flex flex-wrap -m-3.5">
              <div class="flex flex-col items-center w-auto p-3.5">
                <div class="flex items-center justify-center w-9 h-9 bg-blue-500 rounded-full">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.66699 11.3333L8.00033 14.6666L16.3337 6.33325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div class="w-px flex-1 border border-gray-600 border-dashed"></div>
              </div>
              <div class="flex-1 p-3.5 pb-14">
                <span class="inline-block mb-2.5 text-sm text-gray-400 font-bold uppercase">Step 1</span>
                <h3 class="font-heading mb-2.5 text-xl text-white font-black">Choose A Package</h3>
                <p class="text-gray-300 font-bold">Lorem ipsum dolor sit amet, to the consectetur adipiscing elit.</p>
              </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 How it works Component Generator

Tailwind Component #1691

Tailwind CSS

Zanrly

<section class="py-16 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="md:max-w-lg mb-10">
      <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
      <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Common Answers</h2>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="flex flex-col justify-between p-10 h-full bg-gray-800 border border-gray-800 rounded-3xl">
          <div class="flex-initial mb-8 md:mb-36">
            <h3 class="font-heading text-xl text-white font-black">How does Zanrly help you in problems?</h3>
          </div>
          <div class="flex-initial">
            <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="flex flex-col justify-between p-10 h-full bg-gray-800 border border-gray-800 rounded-3xl">
          <div class="flex-initial mb-8 md:mb-36">
            <h3 class="font-heading text-xl text-white font-black">What makes us look good?</h3>
          </div>
          <div class="flex-initial">
            <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.Mauris accumsan tristique velit, lobortis tincidunt ex interdum sagittis.</p>

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

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 md:px-16 bg-gray-900 overflow-hidden border border-gray-800 rounded-3xl">
      <div class="flex flex-wrap items-center -m-4">
        <div class="w-full md:w-1/2 p-4">
          <span class="inline-block mb-3 text-sm text-blue-500 font-bold uppercase tracking-widest">Newsletter</span>
          <h2 class="font-heading text-4xl md:text-5xl text-white font-black tracking-tight">Join to get exclusive contents for free.</h2>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="md:max-w-md md:ml-auto">
            <div class="flex flex-wrap -m-2">
              <div class="w-full lg:flex-1 p-2">
                <input class="px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-white outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 rounded-full" id="newsletterDarkBorderInput3-1" type="text" placeholder="Email address">
              </div>
              <div class="w-full lg:w-auto p-2">
                <div class="flex flex-wrap justify-center -m-2">
                  <div class="w-full lg:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Sign In</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Newsletter Component Generator

Tailwind Component #1693

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 mb-8 bg-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center justify-between -m-4">
          <div class="w-auto p-4">
            <a class="inline-block" href="#">
              <img src="zanrly-assets/logos/zanrly-logo.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-4">
            <ul class="-m-6">
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Products</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">About Us</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Careers</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Portfolio</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="w-auto p-4">
            <div class="flex flex-wrap -m-1.5">
              <div class="w-auto p-1.5">
                <a class="flex items-center justify-center w-10 h-10 bg-white rounded-full" href="#">
                  <img src="zanrly-assets/images/insta.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

AI Footers Component Generator

Tailwind Component #1694

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="relative z-10">
    <div class="container mx-auto px-4">
      <h2 class="font-heading mb-10 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Meet our top tier customers</h2>
    </div>
  </div>
  <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 flex flex-nowrap justify-center items-center -m-4">
      <div class="flex-shrink-0 w-64 p-4">
        <div class="py-24 px-8 h-full bg-gray-900 border border-gray-800 rounded-3xl">
          <img class="mx-auto" src="zanrly-assets/brands/brand-white.svg" alt="">
        </div>
      </div>
      <div class="flex-shrink-0 w-64 p-4">
        <div class="py-24 px-8 h-full bg-gray-900 border border-gray-800 rounded-3xl">
          <img class="mx-auto" src="zanrly-assets/brands/brand3-white.svg" alt="">
        </div>
      </div>
      <div class="flex-shrink-0 w-64 p-4">
        <div class="py-24 px-8 h-full bg-gray-900 border border-gray-800 rounded-3xl">

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 Logo clouds Component Generator

Tailwind Component #1695

Tailwind CSS

Zanrly

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 text-center bg-blue-500 rounded-3xl">
      <div class="md:max-w-lg mx-auto">
        <h2 class="font-heading mb-6 text-4xl md:text-5xl text-white font-black tracking-tight">Invest in a better way to work online.</h2>
        <p class="mb-10 text-xl text-blue-100 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 justify-center -m-2 mb-4">
          <div class="w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-gray-900 hover:bg-gray-800 focus:ring-4 focus:ring-gray-600 rounded-full" href="#">Get Started Now</a></div>
        </div>
        <p class="text-xs text-blue-100">No credit card required.</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

AI Call to action Component Generator

Tailwind Component #1696

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 mb-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 items-center justify-between -m-4">
          <div class="w-auto p-4">
            <a class="inline-block" href="#">
              <img src="zanrly-assets/logos/zanrly-logo-white.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-4">
            <ul class="-m-6">
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Products</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">About Us</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Careers</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Portfolio</a></li>
              <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="w-auto p-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #1697

Tailwind CSS

Zanrly

<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/http-codes/pattern-white.png" alt="">
      </div>
      <div class="relative z-10">
        <div class="flex flex-wrap items-center -m-8">
          <div class="w-full md:w-1/2 p-8">
            <img src="zanrly-assets/images/http-codes/work.png" alt="">
          </div>
          <div class="w-full md:w-1/2 p-8">
            <div class="md:max-w-md mx-auto">
              <h3 class="font-heading text-2xl text-blue-500 font-black tracking-tight">Error 404</h3>
              <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">This page doesn’t exist</h2>
              <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>
            </div>
          </div>
        </div>
      </div>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #1698

Tailwind CSS

Zanrly

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-10 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">
          <div class="w-full md:w-1/2 p-8">
            <div class="py-9 md:max-w-md">
              <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Pricing</span>
              <h2 class="font-heading mb-4 text-4xl text-gray-900 font-black tracking-tight">Unlimited access to all products</h2>
              <p class="mb-8 text-gray-700 font-bold">Yearly access to all products with ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
              <div class="flex flex-wrap -m-2">
                <div class="w-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">
                        <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">
                      <p class="text-sm text-gray-900 font-bold">Build CSS grid–powered layouts visually</p>

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 Pricing Component Generator

Tailwind Component #1699

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 max-w-lg mx-auto text-center">
        <h2 class="font-heading max-w-xl mb-4 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Process how it works</h2>
        <p class="mb-12 text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros.</p>
      </div>
      <div class="relative py-16 px-8 md:px-16 overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/how-it-works/work.png'); background-size: cover; background-position: center; background-repeat: no-repeat;">
        <div class="max-w-md">
          <div class="flex flex-wrap">
            <div class="w-full">
              <div class="flex flex-wrap -m-3.5">
                <div class="flex flex-col items-center w-auto p-3.5">
                  <div class="flex items-center justify-center w-9 h-9 bg-blue-500 rounded-full">
                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M4.66699 11.3333L8.00033 14.6666L16.3337 6.33325" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                  <div class="w-px flex-1 border border-gray-600 border-dashed"></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 How it works Component Generator

Tailwind Component #1700

Tailwind CSS

Zanrly

<section class="py-14 pb-10 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 flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="p-8 h-full bg-gray-100 border border-gray-100 rounded-3xl">
            <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">16,200</h2>
            <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Satisfied clients</h3>
            <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="p-8 h-full bg-gray-100 border border-gray-100 rounded-3xl">
            <h2 class="font-heading mb-6 text-5xl md:text-6xl text-blue-500 font-black tracking-tight">4.7M+</h2>
            <h3 class="font-heading mb-2 text-xl text-gray-700 font-bold">Downloads</h3>
            <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-4">
          <div class="p-8 h-full bg-gray-100 border border-gray-100 rounded-3xl">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

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

Get the code for 13,400+ components

Tailwind Component #1682

Get the code for 13,400+ components

Tailwind Component #1683

Get the code for 13,400+ components

Tailwind Component #1684

Get the code for 13,400+ components

Tailwind Component #1685

Get the code for 13,400+ components

Tailwind Component #1686

Get the code for 13,400+ components

Tailwind Component #1687

Get the code for 13,400+ components

Tailwind Component #1688

Get the code for 13,400+ components

Tailwind Component #1689

Get the code for 13,400+ components

Tailwind Component #1690

Get the code for 13,400+ components

Tailwind Component #1691

Get the code for 13,400+ components

Tailwind Component #1692

Get the code for 13,400+ components

Tailwind Component #1693

Get the code for 13,400+ components

Tailwind Component #1694

Get the code for 13,400+ components

Tailwind Component #1695

Get the code for 13,400+ components

Tailwind Component #1696

Get the code for 13,400+ components

Tailwind Component #1697

Get the code for 13,400+ components

Tailwind Component #1698

Get the code for 13,400+ components

Tailwind Component #1699

Get the code for 13,400+ components

Tailwind Component #1700

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support