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

Tailwind CSS

Nigodo

<section class="py-26 bg-pink-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-pink-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-16">Gain more insight into how people use your</h1>
        <div class="flex flex-wrap -mx-4 -mb-10">
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">1</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Custom analytics</h3>
              <p class="font-bold">Get a complete sales dashboard in the cloud.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">2</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Team Management</h3>
              <p class="font-bold">Our calendar lets you know what is happening with customer</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 #4822

Tailwind CSS

Nigodo

<section class="py-26 bg-gray-200">
  <div class="container px-4 mx-auto">
    <span class="text-lg font-extrabold text-gray-500">Section label</span>
    <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Business is only as good as its tools.</h1>
    <p class="text-xl font-extrabold leading-8 mb-16">Pricing that scales with your business immediately.</p>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-12 xl:mb-0">
        <div class="max-w-md mx-auto px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="text-center mb-12">
            <span class="block text-lg font-extrabold text-gray-500 leading-7">Custom Tag</span>
            <h2 class="text-2xl font-extrabold mb-6">Basic Plan</h2>
            <div class="flex justify-center items-start mb-2">
              <span class="pr-1 text-lg font-extrabold">$</span>
              <span class="text-3xl md:text-4xl font-extrabold">10/mth</span>
            </div>
            <p class="text-lg font-extrabold leading-7">Billed annually</p>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-gray.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-gray.svg" alt="">
            <span class="text-lg font-extrabold">Suspendisse mollis tincidunt</span>

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

Tailwind CSS

Nigodo

<section class="bg-orange-200">
  <div class="pt-26 border-3 border-l-0 border-r-0 border-indigo-900">
    <div class="pb-16 border-b-3 border-indigo-900">
      <div class="container px-4 mx-auto text-center">
        <a class="inline-block mx-auto mb-20" href="#">
          <img class="h-12" src="nigodo-assets/logo-nigodo.svg" alt="">
        </a>
        <div class="flex flex-wrap -mx-4 -mb-6 justify-center">
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Product</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Features</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Pricing</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Resources</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Careers</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6 md:mr-10 2xl:mr-16"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Help</a></div>
          <div class="w-full md:w-1/3 xl:w-auto px-4 mb-6"><a class="text-xl md:text-2xl font-extrabold hover:text-indigo-800" href="#">Privacy</a></div>
        </div>
      </div>
    </div>
    <div class="container px-4 pt-16 pb-24 mx-auto">
      <p class="text-center text-xl md:text-2xl font-extrabold">© 2022 Nigodo. All rights reserved.</p>
    </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 Footers Component Generator

Tailwind Component #4824

Tailwind CSS

Nigodo

<div class="fixed left-0 bottom-0 w-full z-50 pb-16" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-12 px-6 md:px-14 bg-red-200 border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="max-w-xl">
            <p class="text-xl font-bold leading-8 mb-6">We use third-party cookies in order to personalise your experience</p>
            <a class="inline-flex items-center text-xl leading-7 text-red-500 hover:underline" href="#">
              <span class="mr-2">Read our cookie policy</span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.82994 5.29001L2.58994 1.05001C2.49698 0.956281 2.38638 0.881887 2.26452 0.831118C2.14266 0.780349 2.01195 0.754211 1.87994 0.754211C1.74793 0.754211 1.61723 0.780349 1.49537 0.831118C1.37351 0.881887 1.26291 0.956281 1.16994 1.05001C0.983692 1.23737 0.87915 1.49082 0.87915 1.75501C0.87915 2.0192 0.983692 2.27265 1.16994 2.46001L4.70994 6.00001L1.16994 9.54001C0.983692 9.72737 0.87915 9.98082 0.87915 10.245C0.87915 10.5092 0.983692 10.7626 1.16994 10.95C1.26338 11.0427 1.3742 11.116 1.49604 11.1658C1.61787 11.2155 1.74834 11.2408 1.87994 11.24C2.01155 11.2408 2.14201 11.2155 2.26385 11.1658C2.38569 11.116 2.4965 11.0427 2.58994 10.95L6.82994 6.71001C6.92367 6.61705 6.99806 6.50645 7.04883 6.38459C7.0996 6.26273 7.12574 6.13202 7.12574 6.00001C7.12574 5.868 7.0996 5.73729 7.04883 5.61543C6.99806 5.49357 6.92367 5.38297 6.82994 5.29001Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg hover:text-white hover:bg-indigo-800 font-extrabold bg-white border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Decline</a><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Allow</a></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 Cookies Component Generator

Tailwind Component #4825

Tailwind CSS

Nigodo

<section class="py-26 bg-purple-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-purple-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-16">Gain more insight into how people use your</h1>
        <div class="flex flex-wrap -mx-4 -mb-10">
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">1</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Custom analytics</h3>
              <p class="font-bold">Get a complete sales dashboard in the cloud.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">2</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Team Management</h3>
              <p class="font-bold">Our calendar lets you know what is happening with customer</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 #4826

Tailwind CSS

Nigodo

<section class="py-26 bg-indigo-200">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <span class="inline-flex mb-4 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border border-indigo-900 bg-green-200 uppercase">Application</span>
      <h1 class="text-4xl font-extrabold font-heading">Great work starts with your app</h1>
    </div>
    <img class="block mx-auto mb-12" src="nigodo-assets/apps/laptop-full.svg" alt="">
    <div class="max-w-3xl mx-auto text-center">
      <p class="text-xl font-extrabold leading-7 mb-6">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Request a demo</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></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 Application Component Generator

Tailwind Component #4827

Tailwind CSS

Nigodo

<div class="fixed left-0 bottom-0 w-full z-50 pb-16" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-12 px-6 md:px-14 bg-gray-200 border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="max-w-xl">
            <p class="text-xl font-bold leading-8 mb-6">We use third-party cookies in order to personalise your experience</p>
            <a class="inline-flex items-center text-xl leading-7 text-gray-500 hover:underline" href="#">
              <span class="mr-2">Read our cookie policy</span>
              <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.82994 5.29001L2.58994 1.05001C2.49698 0.956281 2.38638 0.881887 2.26452 0.831118C2.14266 0.780349 2.01195 0.754211 1.87994 0.754211C1.74793 0.754211 1.61723 0.780349 1.49537 0.831118C1.37351 0.881887 1.26291 0.956281 1.16994 1.05001C0.983692 1.23737 0.87915 1.49082 0.87915 1.75501C0.87915 2.0192 0.983692 2.27265 1.16994 2.46001L4.70994 6.00001L1.16994 9.54001C0.983692 9.72737 0.87915 9.98082 0.87915 10.245C0.87915 10.5092 0.983692 10.7626 1.16994 10.95C1.26338 11.0427 1.3742 11.116 1.49604 11.1658C1.61787 11.2155 1.74834 11.2408 1.87994 11.24C2.01155 11.2408 2.14201 11.2155 2.26385 11.1658C2.38569 11.116 2.4965 11.0427 2.58994 10.95L6.82994 6.71001C6.92367 6.61705 6.99806 6.50645 7.04883 6.38459C7.0996 6.26273 7.12574 6.13202 7.12574 6.00001C7.12574 5.868 7.0996 5.73729 7.04883 5.61543C6.99806 5.49357 6.92367 5.38297 6.82994 5.29001Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="flex flex-wrap items-center lg:justify-end"><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg hover:text-white hover:bg-indigo-800 font-extrabold bg-white border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Decline</a><a x-on:click.prevent="open=false" class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Allow</a></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 Cookies Component Generator

Tailwind Component #4828

Tailwind CSS

Nigodo

<section class="py-26 bg-purple-200">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto">
      <div class="text-center mb-8">
        <a class="inline-block mx-auto mb-6" href="#">
          <img src="nigodo-assets/logo-icon-nigodo.svg" alt="">
        </a>
        <h2 class="text-3xl md:text-4xl font-extrabold mb-2">Sign in</h2>
        <p class="text-lg font-extrabold leading-7 text-purple-500">Start your demo version</p>
      </div>
      <form action="">
        <div class="mb-6">
          <label class="block mb-2 font-extrabold" for="">Email</label>
          <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="email" placeholder="hello@shuffle.dev">
        </div>
        <div class="mb-6">
          <label class="block mb-2 font-extrabold" for="">Password</label>
          <input class="inline-block w-full p-4 leading-6 text-lg font-extrabold placeholder-indigo-900 bg-white shadow border-2 border-indigo-900 rounded" type="password" placeholder="**********">
        </div>
        <div class="flex flex-wrap -mx-4 mb-6 items-center justify-between">
          <div class="w-full lg:w-auto px-4 mb-4 lg:mb-0">
            <label for="">
              <input type="checkbox">
              <span class="ml-1 font-extrabold">Remember me</span>

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

Tailwind CSS

Nigodo

<section class="py-26 bg-orange-200">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="text-lg font-extrabold text-orange-500">Newsletter</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-4">Sign up for our newsletter</h1>
      <p class="text-xl font-extrabold leading-8 mb-10">Stay in the loop with everything you need to know.</p>
    </div>
    <div class="max-w-lg mx-auto">
      <div class="flex flex-wrap -mx-2 justify-center">
        <div class="flex-grow w-full md:w-auto px-2 mb-2">
          <input class="inline-block w-full p-4 text-lg font-extrabold placeholder-indigo-900 shadow border-2 border-indigo-900 rounded outline-none" type="email" placeholder="Enter your email">
        </div>
        <div class="w-full md:w-auto px-2 mb-2"><a class="inline-flex items-center justify-center w-full md:w-auto h-full py-4 px-5 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 rounded transition duration-200" href="#">Subscribe</a></div>
        <div class="w-full px-2">
          <p class="text-xs font-extrabold">We care about your data in our privacy policy</p>
        </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 Newsletter Component Generator

Tailwind Component #4830

Tailwind CSS

Nigodo

<section x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center bg-orange-200 py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:inline-flex w-full max-w-xs p-4 items-center bg-white border-2 border-indigo-900 rounded shadow">
      <a class="text-indigo-900 hover:text-indigo-800" href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94731 18.6997 5.81279 16.9855 4.27665C15.2714 2.74051 13.0338 1.91951 10.7329 1.98247C8.43203 2.04543 6.24272 2.98757 4.61514 4.61515C2.98756 6.24273 2.04543 8.43204 1.98247 10.7329C1.91951 13.0338 2.7405 15.2714 4.27664 16.9855C5.81278 18.6997 7.9473 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5064 21.8481 21.617 21.7737 21.71 21.68C21.8902 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8902 20.4765 21.71 20.29ZM11 18C9.61553 18 8.26215 17.5895 7.111 16.8203C5.95986 16.0511 5.06265 14.9579 4.53284 13.6788C4.00303 12.3997 3.8644 10.9922 4.1345 9.63437C4.4046 8.2765 5.07128 7.02922 6.05025 6.05026C7.02922 5.07129 8.2765 4.4046 9.63436 4.13451C10.9922 3.86441 12.3997 4.00303 13.6788 4.53285C14.9579 5.06266 16.0511 5.95987 16.8203 7.11101C17.5895 8.26216 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9497 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#171952"></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

AI Navigation (horizontal) Component Generator

Tailwind Component #4831

Tailwind CSS

Nigodo

<section class="py-26 bg-indigo-200">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-5xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-indigo-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Gain more insight into how people use your</h1>
      <p class="text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-message.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Measure your performance</h4>
          <p class="text-lg font-extrabold leading-7">Stay connected with your team and make quick decisions wherever you are.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-bar.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Custom analytics</h4>
          <p class="text-lg font-extrabold leading-7">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">

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

Tailwind Component #4832

Tailwind CSS

Nigodo

<section class="py-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <span class="text-lg font-extrabold text-green-500">How it works</span>
        <h1 class="max-w-xl text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-16">Gain more insight into how people use your</h1>
        <div class="flex flex-wrap -mx-4 -mb-10">
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">1</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Custom analytics</h3>
              <p class="font-bold">Get a complete sales dashboard in the cloud.</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-10">
            <div class="max-w-xs">
              <div class="inline-flex items-center justify-center w-18 h-18 mb-6 bg-white rounded-full border-3 border-indigo-900 text-indigo-900 shadow-md">
                <span class="text-3xl font-extrabold leading-8">2</span>
              </div>
              <h3 class="text-2xl font-extrabold mb-5">Team Management</h3>
              <p class="font-bold">Our calendar lets you know what is happening with customer</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 #4833

Tailwind CSS

Nigodo

<section class="py-26 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl font-extrabold">Projects completed</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl font-extrabold">APR</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl font-extrabold">Hours saved annually</h4>

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

Tailwind CSS

Nigodo

<section class="py-26 bg-red-200">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-5xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-red-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Gain more insight into how people use your</h1>
      <p class="text-xl font-extrabold leading-8">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-message.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Measure your performance</h4>
          <p class="text-lg font-extrabold leading-7">Stay connected with your team and make quick decisions wherever you are.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">
          <img class="block mx-auto mb-4" src="nigodo-assets/features/icon-bar.svg" alt="">
          <h4 class="text-2xl font-extrabold mb-4">Custom analytics</h4>
          <p class="text-lg font-extrabold leading-7">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl text-center">

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

Tailwind Component #4835

Tailwind CSS

Nigodo

<section class="py-26 bg-gray-200">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto text-center">
      <span class="text-lg font-extrabold text-gray-500">Section label</span>
      <h1 class="text-4xl font-extrabold font-heading mt-4 mb-4">Join our team</h1>
      <p class="text-xl font-extrabold leading-8 mb-16">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Front-end Developer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">Back-end Developer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</a>
        </div>
      </div>
      <div class="px-6 md:px-12 py-8 mb-8 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
        <div class="md:flex justify-between items-center">
          <h4 class="text-2xl font-extrabold mb-10 md:mb-0">UI/UX Designer</h4>
          <a class="inline-block py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">View Job</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 Careers Component Generator

Tailwind Component #4836

Tailwind CSS

Nigodo

<section class="py-26 bg-pink-200" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-12">
      <span class="inline-block mb-3 text-lg font-extrabold text-pink-500">Quotes</span>
      <div class="flex flex-wrap lg:flex-nowrap -mx-4">
        <div class="hidden md:block self-start px-4 text-pink-300">
          <svg width="75" height="64" viewBox="0 0 75 64" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M74.1252 0.631112L72.2546 13.9596C68.5132 13.6478 65.4734 14.2714 63.1351 15.8303C60.7967 17.3112 59.1599 19.4937 58.2246 22.3776C57.3672 25.1836 57.2113 28.4573 57.7569 32.1986H74.1252V64H42.3239V32.1986C42.3239 20.9746 44.935 12.4787 50.1573 6.71079C55.3796 0.864946 63.3689 -1.16161 74.1252 0.631112ZM31.8014 0.631112L29.9307 13.9596C26.1894 13.6478 23.1495 14.2714 20.8112 15.8303C18.4729 17.3112 16.836 19.4937 15.9007 22.3776C15.0433 25.1836 14.8874 28.4573 15.433 32.1986H31.8014V64H0V32.1986C0 20.9746 2.61114 12.4787 7.83342 6.71079C13.0557 0.864946 21.045 -1.16161 31.8014 0.631112Z" fill="currentColor"></path>
          </svg>
        </div>
        <div class="w-full lg:w-auto py-6 lg:py-0 px-4">
            <div class="overflow-hidden">
              <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                  <div x-ref="slide1" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                      <span class="text-pink-400 font-bold">CEO &amp; Founder at Nigodo</span>
                  </div>
                  <div x-ref="slide2" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                      <span class="text-pink-400 font-bold">Co-Founder of FlexPro Solutions</span>

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

Tailwind CSS

Nigodo

<section class="py-26 md:py-48 min-h-screen md:min-h-0 bg-green-200">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto text-center">
      <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Error 404</span>
      <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Page not found</h1>
      <p class="text-xl font-extrabold leading-7 mb-6">Something went wrong, so this page is broken.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Go back to Homepage</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Try Again</a></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 #4838

Tailwind CSS

Nigodo

<section class="py-26 bg-orange-200">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <span class="inline-flex mb-4 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border border-indigo-900 bg-green-200 uppercase">Application</span>
      <h1 class="text-4xl font-extrabold font-heading">Great work starts with your app</h1>
    </div>
    <img class="block mx-auto mb-12" src="nigodo-assets/apps/laptop-full.svg" alt="">
    <div class="max-w-3xl mx-auto text-center">
      <p class="text-xl font-extrabold leading-7 mb-6">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Request a demo</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></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 Application Component Generator

Tailwind Component #4839

Tailwind CSS

Nigodo

<section class="py-26 bg-indigo-200">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl font-extrabold">Projects completed</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl font-extrabold">APR</h4>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex items-center justify-center h-44 p-6 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div>
            <h3 class="text-3xl sm:text-4xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl font-extrabold">Hours saved annually</h4>

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

Tailwind CSS

Nigodo

<section x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center bg-purple-200 py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:inline-flex w-full max-w-xs p-4 items-center bg-white border-2 border-indigo-900 rounded shadow">
      <a class="text-indigo-900 hover:text-indigo-800" href="#">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94731 18.6997 5.81279 16.9855 4.27665C15.2714 2.74051 13.0338 1.91951 10.7329 1.98247C8.43203 2.04543 6.24272 2.98757 4.61514 4.61515C2.98756 6.24273 2.04543 8.43204 1.98247 10.7329C1.91951 13.0338 2.7405 15.2714 4.27664 16.9855C5.81278 18.6997 7.9473 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5064 21.8481 21.617 21.7737 21.71 21.68C21.8902 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8902 20.4765 21.71 20.29ZM11 18C9.61553 18 8.26215 17.5895 7.111 16.8203C5.95986 16.0511 5.06265 14.9579 4.53284 13.6788C4.00303 12.3997 3.8644 10.9922 4.1345 9.63437C4.4046 8.2765 5.07128 7.02922 6.05025 6.05026C7.02922 5.07129 8.2765 4.4046 9.63436 4.13451C10.9922 3.86441 12.3997 4.00303 13.6788 4.53285C14.9579 5.06266 16.0511 5.95987 16.8203 7.11101C17.5895 8.26216 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9497 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#171952"></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

AI Navigation (horizontal) 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 #4821

Get the code for 13,400+ components

Tailwind Component #4822

Get the code for 13,400+ components

Tailwind Component #4823

Get the code for 13,400+ components

Tailwind Component #4824

Get the code for 13,400+ components

Tailwind Component #4825

Get the code for 13,400+ components

Tailwind Component #4826

Get the code for 13,400+ components

Tailwind Component #4827

Get the code for 13,400+ components

Tailwind Component #4828

Get the code for 13,400+ components

Tailwind Component #4829

Get the code for 13,400+ components

Tailwind Component #4830

Get the code for 13,400+ components

Tailwind Component #4831

Get the code for 13,400+ components

Tailwind Component #4832

Get the code for 13,400+ components

Tailwind Component #4833

Get the code for 13,400+ components

Tailwind Component #4834

Get the code for 13,400+ components

Tailwind Component #4835

Get the code for 13,400+ components

Tailwind Component #4836

Get the code for 13,400+ components

Tailwind Component #4837

Get the code for 13,400+ components

Tailwind Component #4838

Get the code for 13,400+ components

Tailwind Component #4839

Get the code for 13,400+ components

Tailwind Component #4840

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