Tailwind CSS Components

Framework

UI Library

Components

Tailwind Component #1301

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

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

Tailwind Component #1302

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 md:px-16 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 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-white 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 #1303

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-900 border border-gray-800 overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative 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-900 border border-gray-800 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-100 font-black tracking-tight">
                    <span>$32</span>
                    <span class="text-xl">USD</span>
                  </h2>
                  <p class="text-xl text-gray-700 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.

Tailwind Component #1304

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 bg-white overflow-hidden border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="zanrly-assets/images/contact/pattern-gray.svg" alt="">
        <div class="relative mb-10 md:max-w-md mx-auto text-center">
          <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">Get connected</h2>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="relative flex flex-wrap -m-4">
          <div class="w-full md:w-1/3 p-4">
            <div class="p-10 text-center h-full bg-gray-100 rounded-3xl">
              <div class="flex items-center justify-center mb-6 w-12 h-12 mx-auto bg-white rounded-xl">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3144C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3146 13.9828 15.4995 13.9955 15.7925C13.9985 15.862 14 15.9314 14 16Z" fill="#3B82F6"></path>
                  <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>
                  <path d="M22 16C22 19.31 19.31 22 16 22C15.2555 22 14.5393 21.8643 13.8811 21.6141C13.5624 21.4929 13.503 21.0851 13.7248 20.8262C14.8668 19.4938 15.5 17.786 15.5 16C15.5 15.66 15.47 15.32 15.42 15V15C15.3902 14.8155 15.4844 14.6342 15.6478 14.5437C16.9719 13.8107 18.0532 12.6875 18.727 11.3153C18.8609 11.0427 19.1968 10.923 19.4452 11.0977C20.9863 12.1818 22 13.9755 22 16Z" fill="#3B82F6"></path>
                </svg>
              </div>
              <h3 class="font-heading mb-2 text-xl text-gray-900 font-black">Send Email</h3>
              <p class="text-gray-500 font-bold">info@zanrly.com</p>
              <p class="text-gray-500 font-bold">support@zanrly.com</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

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

Contact Us Section with Three Info Cards

A centered contact section with an eyebrow label, large heading, short intro text, and three gray cards in a row showing email, phone, and address with blue icons. It is a marketing-style informational block rather than an interactive form.

Tailwind Component #1305

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

Tailwind CSS

Zanrly

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1307

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 md:px-16 bg-gray-900 overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative flex flex-wrap -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">

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

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 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark-light w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark-light.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <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>

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

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-800 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 #1310

Tailwind CSS

Zanrly

<section x-data="{ showContent: false }" 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="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-white font-black tracking-tight">Resources and stories center</h2>
          <p class="md:max-w-md mx-auto text-gray-400 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-800 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-white hover:text-gray-200 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-gray-800 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 #1311

Tailwind CSS

Zanrly

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

Tailwind CSS

Zanrly

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1313

Tailwind CSS

Zanrly

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1314

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 rounded-3xl">
      <div class="mb-10 md:max-w-xl mx-auto text-center">
        <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
        <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Got questions? We’re here to help!</h2>
        <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      </div>
      <div class="max-w-3xl mx-auto">
        <div class="flex flex-wrap -m-3 mb-10">
          <div class="w-full p-3">
            <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-white rounded-3xl cursor-pointer">
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <h3 class="font-heading text-xl text-gray-900 font-black">Do you provide any free plan?</h3>
                  <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                      <p class="text-gray-500 mt-4 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                  </div>
                </div>
                <div class="w-auto p-2">
                    <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17.9207 8.17999H11.6907H6.08072C5.12072 8.17999 4.64073 9.33999 5.32073 10.02L10.5007 15.2C11.3307 16.03 12.6807 16.03 13.5107 15.2L15.4807 13.23L18.6907 10.02C19.3607 9.33999 18.8807 8.17999 17.9207 8.17999Z" fill="#D1D5DB"></path>
                        </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #1315

Tailwind CSS

Zanrly

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

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

Tailwind CSS

Zanrly

<section class="py-10 bg-white 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="relative py-32 px-8 text-center h-full bg-gray-100 overflow-hidden rounded-3xl">
          <img class="absolute w-full bottom-0 left-0" src="zanrly-assets/images/newsletter/pattern-net-white.svg" alt="">
          <div class="relative z-10 max-w-md mx-auto">
            <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Careers</span>
            <h2 class="font-heading mb-8 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Start your journey with us.</h2>
            <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="#">Join our Team</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="relative py-32 px-8 text-center h-full bg-blue-500 rounded-3xl" style="background-image: url('zanrly-assets/images/newsletter/pattern-net2-white.svg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
          <div class="relative z-10 max-w-md mx-auto">
            <span class="inline-block mb-2 text-sm text-white font-bold uppercase tracking-widest">Applications</span>
            <h2 class="font-heading mb-8 text-4xl md:text-5xl text-white font-black tracking-tight">Subscribe and receive updates</h2>
            <div class="max-w-sm mx-auto">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:flex-1 p-2">
                  <input class="px-6 py-3.5 w-full text-lg text-white font-bold bg-blue-400 outline-none focus:ring-4 focus:ring-blue-200 placeholder-white rounded-full" id="newsletterLightPatternInput1-1" type="text" placeholder="Email address">

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

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">
        <h2 class="font-heading max-w-xl mb-20 text-4xl md:text-5xl text-gray-900 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-900 font-black bg-gray-100 rounded-full">1</div>
              </div>
              <div class="flex-1 p-3">
                <div class="bg-gray-200 h-px"></div>
              </div>
            </div>
            <div class="md:w-3/4">
              <h3 class="font-heading mb-4 text-2xl text-gray-900 font-bold">Connect</h3>
              <p class="text-gray-700 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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

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

Tailwind Component #1319

Tailwind CSS

Zanrly

<section class="py-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 px-4 bg-gray-100 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>

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

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 bg-gray-100 overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="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 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.

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

Get the code for 13,400+ components

Tailwind Component #1302

Get the code for 13,400+ components

Tailwind Component #1303

Get the code for 13,400+ components

Tailwind Component #1304

Get the code for 13,400+ components

Contact Us Section with Three Info Cards

Tailwind Component #1305

Get the code for 13,400+ components

Tailwind Component #1306

Get the code for 13,400+ components

Tailwind Component #1307

Get the code for 13,400+ components

Tailwind Component #1308

Get the code for 13,400+ components

Tailwind Component #1309

Get the code for 13,400+ components

Tailwind Component #1310

Get the code for 13,400+ components

Tailwind Component #1311

Get the code for 13,400+ components

Tailwind Component #1312

Get the code for 13,400+ components

Tailwind Component #1313

Get the code for 13,400+ components

Tailwind Component #1314

Get the code for 13,400+ components

Tailwind Component #1315

Get the code for 13,400+ components

Tailwind Component #1316

Get the code for 13,400+ components

Tailwind Component #1317

Get the code for 13,400+ components

Tailwind Component #1318

Get the code for 13,400+ components

Tailwind Component #1319

Get the code for 13,400+ components

Tailwind Component #1320

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