Tailwind CSS Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

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

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-indigo-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-indigo-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center mb-14">
      <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">Flexible pricing plan for your startup</h1>
      <div class="flex items-center justify-center">
        <span class="sm:text-xl font-extrabold">Billed Monthly</span>
        <div class="inline-flex w-16 h-10 mx-4 px-px items-center bg-white border-3 border-indigo-900 rounded-full shadow" x-data="{ toggle: false }">
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': !toggle, 'focus:outline-none': toggle }"></button>
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': toggle, 'focus:outline-none': !toggle }"></button>
        </div>
        <span class="sm:text-xl font-extrabold">Billed Annually</span>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="flex flex-col h-full bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="flex flex-wrap justify-between items-center px-6 lg:px-12 py-12 border-b-3 border-indigo-900">
            <div class="mb-4 w-full sm:w-1/2 sm:mb-0">
              <h2 class="text-2xl font-extrabold">Basic plan</h2>
              <p class="text-lg font-extrabold leading-7">For bigger teams</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 Pricing Component Generator

Tailwind Component #6622

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-purple-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-purple-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="w-1/2 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/microsoft.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/google.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 xl:border-b-0 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/slack.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 Logo clouds Component Generator

Tailwind Component #6623

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-pink-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-pink-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="p-8 md:p-16 bg-white border-3 border-indigo-900 rounded-2xl shadow">
      <div class="max-w-3xl mx-auto text-center">
        <span class="text-lg font-extrabold text-pink-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>
  </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 #6624

Tailwind CSS

Nigodo

<section class="py-26 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-dots-red-left.svg" alt="">
  <img class="absolute bottom-0 right-0" src="nigodo-assets/background-elements/pattern-two-smashes-red-right.svg" alt="">
  <img class="hidden md:block absolute bottom-0 left-0" src="nigodo-assets/background-elements/pattern-two-smashes-red-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 mb-16 items-center justify-between">
      <div class="w-full lg:w-1/2 xl:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-lg font-extrabold text-red-500">Section label</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Our team is the best in the business.</h1>
        <p class="text-xl font-extrabold leading-8">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="flex flex-wrap lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-6 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="#">Open positions</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>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-2/3 px-4 mb-8">
        <div class="h-full flex flex-col border-3 border-indigo-900 rounded-2xl shadow overflow-hidden">
          <div class="mb-auto h-full">
            <img class="block h-96 lg:h-full w-full object-cover" src="nigodo-assets/team/photo-5.jpg" alt="">
          </div>
          <div class="px-6 py-4 bg-indigo-900">
            <h2 class="text-xl text-white font-extrabold">Macauley Herring</h2>
            <span class="text-lg font-bold text-indigo-300">CEO &amp; Founder</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 Team Component Generator

Tailwind Component #6625

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 md:h-full left-0 w-1/3" src="nigodo-assets/background-elements/pattern-two-smashes-gray-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-2/3" src="nigodo-assets/background-elements/pattern-smash-dots-gray-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <div class="max-w-lg mb-12">
          <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">We believe in the power of data</h1>
          <p class="text-xl font-extrabold leading-8">Nigodo is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
        </div>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Projects completed</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">APR</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 md:mb-0 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Hours saved annually</h4>
          </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 #6626

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute top-0 md:h-full left-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-green-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-green-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap items-center bg-white border-3 border-green-900 rounded-2xl shadow-md overflow-hidden">
      <img class="block w-full md:w-2/5 h-112 md:h-156 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387&amp;q=80" alt="">
      <div class="w-full md:w-3/5 px-6 lg:px-20 py-16">
        <div class="mb-6 text-green-300 opacity-10">
          <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="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="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                    <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                    <span class="block mb-12 text-green-400 font-bold">CEO &amp; Founder at Nigodo</span>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                    <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                    <span class="block mb-12 text-green-400 font-bold">Co-Founder of FlexPro Solutions</span>
                </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 #6627

Tailwind CSS

Nigodo

<section class="pt-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-red-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-red-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-3xl mx-auto text-center mb-16">
      <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">Application</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-4">Great work starts with your app</h1>
      <p class="text-xl font-extrabold leading-7 mb-10">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
      <div class="flex flex-wrap items-center justify-center">
        <a class="inline-block mr-4" href="#">
          <img src="nigodo-assets/apps/appstore.svg" alt="">
        </a>
        <a class="inline-block" href="#">
          <img src="nigodo-assets/apps/google.svg" alt="">
        </a>
      </div>
    </div>
    <img class="block mx-auto" src="nigodo-assets/apps/three-phones-bottom.svg" alt="">
  </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 #6628

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-indigo-light-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-2-indigo-light-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <h2 class="text-center text-xl font-extrabold mb-6">Trusted by the top companies in this industry</h2>
    <div class="flex flex-wrap bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
      <div class="w-1/2 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/microsoft.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/google.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/spotify.svg" alt="">
        </div>
      </div>
      <div class="w-1/2 xl:w-1/3">
        <div class="flex items-center justify-center h-32 p-6 border-b-3 xl:border-b-0 xl:border-r-3 border-indigo-900">
          <img class="block mx-auto h-8" src="nigodo-assets/logo-clouds/slack.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 Logo clouds Component Generator

Tailwind Component #6629

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 right-0 w-1/2 md:w-2/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-orange-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-orange-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <h1 class="max-w-lg xl:max-w-none text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-6">Join 6,000+ startups growing with Flex</h1>
        <div class="mb-8">
          <div class="flex mb-4 items-center">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-orange.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <div class="flex mb-4 items-center">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-orange.svg" alt="">
            <span class="text-lg font-extrabold">Suspendisse mollis tincidunt</span>
          </div>
          <div class="flex items-center">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-orange.svg" alt="">
            <span class="text-lg font-extrabold">Praesent varius justo vel justo pulvinar</span>
          </div>
        </div>
        <div class="flex flex-wrap items-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-4 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="#">Learn More</a></div>
      </div>
      <div class="w-full lg:w-1/2 px-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 Call to action Component Generator

Tailwind Component #6630

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-gray-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-gray-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="p-8 md:p-16 bg-white border-3 border-indigo-900 rounded-2xl shadow">
      <div class="max-w-3xl mx-auto text-center">
        <span class="text-lg font-extrabold text-gray-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>
  </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 #6631

Tailwind CSS

Nigodo

<section class="pt-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-pink-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-pink-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-3xl mx-auto text-center mb-16">
      <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">Application</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-4">Great work starts with your app</h1>
      <p class="text-xl font-extrabold leading-7 mb-10">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
      <div class="flex flex-wrap items-center justify-center">
        <a class="inline-block mr-4" href="#">
          <img src="nigodo-assets/apps/appstore.svg" alt="">
        </a>
        <a class="inline-block" href="#">
          <img src="nigodo-assets/apps/google.svg" alt="">
        </a>
      </div>
    </div>
    <img class="block mx-auto" src="nigodo-assets/apps/three-phones-bottom.svg" alt="">
  </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 #6632

Tailwind CSS

Nigodo

<section class="pt-26 lg:py-40 xl:py-52 min-h-screen bg-white relative overflow-hidden">
  <img class="absolute top-0 right-0" src="nigodo-assets/background-elements/pattern-smash-rotate-orange-right.svg" alt="">
  <img class="hidden lg:block absolute top-0 left-0 h-full w-2/5 border-r-3 border-b-3 border-indigo-900 shadow-lg object-cover" src="nigodo-assets/img/board-office.jpg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex mb-14 lg:mb-0">
      <div class="w-full lg:w-1/2 ml-auto">
        <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">Error 404</span>
        <h1 class="text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-3">Oh no! Error 404</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"><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>
    <img class="lg:hidden border-3 border-indigo-900" src="nigodo-assets/img/board-office.jpg" alt="">
  </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 #6633

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-dots-pink-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/2" src="nigodo-assets/background-elements/pattern-smash-big-pink-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center mb-14">
      <span class="text-lg font-extrabold text-pink-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Flexible pricing plan for your startup</h1>
      <div class="flex items-center justify-center">
        <span class="sm:text-xl font-extrabold">Billed Monthly</span>
        <div class="inline-flex w-16 h-10 mx-4 px-px items-center bg-white border-3 border-indigo-900 rounded-full shadow" x-data="{ toggle: false }">
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': !toggle, 'focus:outline-none': toggle }"></button>
            <button x-on:click="toggle = !toggle" class="w-7 h-7 rounded-full" :class="{ 'border-3 border-indigo-900 bg-green-200': toggle, 'focus:outline-none': !toggle }"></button>
        </div>
        <span class="sm:text-xl font-extrabold">Billed Annually</span>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="flex flex-col h-full bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="flex flex-wrap justify-between items-center px-6 lg:px-12 py-12 border-b-3 border-indigo-900">
            <div class="mb-4 w-full sm:w-1/2 sm:mb-0">
              <h2 class="text-2xl font-extrabold">Basic plan</h2>
              <p class="text-lg font-extrabold leading-7">For bigger teams</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 Pricing Component Generator

Tailwind Component #6634

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute top-0 md:h-full left-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-indigo-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-indigo-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap items-center bg-white border-3 border-indigo-900 rounded-2xl shadow-md overflow-hidden">
      <img class="block w-full md:w-2/5 h-112 md:h-156 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387&amp;q=80" alt="">
      <div class="w-full md:w-3/5 px-6 lg:px-20 py-16">
        <div class="mb-6 text-indigo-300 opacity-10">
          <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="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="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                    <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                    <span class="block mb-12 text-indigo-400 font-bold">CEO &amp; Founder at Nigodo</span>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                    <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                    <span class="block mb-12 text-indigo-400 font-bold">Co-Founder of FlexPro Solutions</span>
                </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 #6635

Tailwind CSS

Nigodo

<section class="py-26 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-dots-purple-left.svg" alt="">
  <img class="absolute bottom-0 right-0" src="nigodo-assets/background-elements/pattern-two-smashes-purple-right.svg" alt="">
  <img class="hidden md:block absolute bottom-0 left-0" src="nigodo-assets/background-elements/pattern-two-smashes-purple-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 mb-16 items-center justify-between">
      <div class="w-full lg:w-1/2 xl:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-lg font-extrabold text-purple-500">Section label</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Our team is the best in the business.</h1>
        <p class="text-xl font-extrabold leading-8">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="flex flex-wrap lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-6 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="#">Open positions</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>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-2/3 px-4 mb-8">
        <div class="h-full flex flex-col border-3 border-indigo-900 rounded-2xl shadow overflow-hidden">
          <div class="mb-auto h-full">
            <img class="block h-96 lg:h-full w-full object-cover" src="nigodo-assets/team/photo-5.jpg" alt="">
          </div>
          <div class="px-6 py-4 bg-indigo-900">
            <h2 class="text-xl text-white font-extrabold">Macauley Herring</h2>
            <span class="text-lg font-bold text-indigo-300">CEO &amp; Founder</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 Team Component Generator

Tailwind Component #6636

Tailwind CSS

Nigodo

<section class="pt-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-purple-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/3" src="nigodo-assets/background-elements/pattern-circle-big-purple-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-3xl mx-auto text-center mb-16">
      <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">Application</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mb-4">Great work starts with your app</h1>
      <p class="text-xl font-extrabold leading-7 mb-10">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage every aspect of your business in one secure platform.</p>
      <div class="flex flex-wrap items-center justify-center">
        <a class="inline-block mr-4" href="#">
          <img src="nigodo-assets/apps/appstore.svg" alt="">
        </a>
        <a class="inline-block" href="#">
          <img src="nigodo-assets/apps/google.svg" alt="">
        </a>
      </div>
    </div>
    <img class="block mx-auto" src="nigodo-assets/apps/three-phones-bottom.svg" alt="">
  </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 #6637

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 md:h-full left-0 w-1/3" src="nigodo-assets/background-elements/pattern-two-smashes-orange-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-2/3" src="nigodo-assets/background-elements/pattern-smash-dots-orange-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <div class="max-w-lg mb-12">
          <span class="text-lg font-extrabold text-orange-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">We believe in the power of data</h1>
          <p class="text-xl font-extrabold leading-8">Nigodo is the only business platform that lets you run your business on one platform, seamlessly across all digital channels.</p>
        </div>
        <div class="flex flex-wrap -mx-4">
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">235.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Projects completed</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">$10M</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">APR</h4>
          </div>
          <div class="w-full md:w-1/2 px-4 mb-20 md:mb-0 text-center">
            <h3 class="text-4xl xl:text-5xl font-extrabold mb-3">+50.000</h3>
            <h4 class="text-xl md:text-2xl font-extrabold">Hours saved annually</h4>
          </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 #6638

Tailwind CSS

Nigodo

<section class="py-26 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-dots-2-indigo-light-left.svg" alt="">
  <img class="absolute bottom-0 right-0" src="nigodo-assets/background-elements/pattern-two-smashes-indigo-light-right.svg" alt="">
  <img class="hidden md:block absolute bottom-0 left-0" src="nigodo-assets/background-elements/pattern-two-smashes-indigo-light-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 mb-16 items-center justify-between">
      <div class="w-full lg:w-1/2 xl:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-lg font-extrabold text-indigo-500">Section label</span>
        <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Our team is the best in the business.</h1>
        <p class="text-xl font-extrabold leading-8">Highly professional and capable of running your business across all digital channels.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="flex flex-wrap lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-6 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="#">Open positions</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>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-2/3 px-4 mb-8">
        <div class="h-full flex flex-col border-3 border-indigo-900 rounded-2xl shadow overflow-hidden">
          <div class="mb-auto h-full">
            <img class="block h-96 lg:h-full w-full object-cover" src="nigodo-assets/team/photo-5.jpg" alt="">
          </div>
          <div class="px-6 py-4 bg-indigo-900">
            <h2 class="text-xl text-white font-extrabold">Macauley Herring</h2>
            <span class="text-lg font-bold text-indigo-300">CEO &amp; Founder</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 Team Component Generator

Tailwind Component #6639

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute top-0 md:h-full left-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-purple-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-purple-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap items-center bg-white border-3 border-purple-900 rounded-2xl shadow-md overflow-hidden">
      <img class="block w-full md:w-2/5 h-112 md:h-156 object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=387&amp;q=80" alt="">
      <div class="w-full md:w-3/5 px-6 lg:px-20 py-16">
        <div class="mb-6 text-purple-300 opacity-10">
          <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="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="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">The best solution for anyone who wants to work a flexible schedule but still earn a full-time income.</h1>
                    <h4 class="text-xl font-extrabold">Macauley Herring</h4>
                    <span class="block mb-12 text-purple-400 font-bold">CEO &amp; Founder at Nigodo</span>
                </div>
                <div x-ref="slide2" class="flex-shrink-0 w-full">
                    <h1 class="max-w-md text-2xl lg:text-3xl font-extrabold font-heading mb-12">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                    <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                    <span class="block mb-12 text-purple-400 font-bold">Co-Founder of FlexPro Solutions</span>
                </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 #6640

Tailwind CSS

Nigodo

<section class="py-26 bg-white relative overflow-hidden">
  <img class="absolute top-0 right-0 w-1/2 md:w-2/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-purple-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-purple-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-20 lg:mb-0">
        <h1 class="max-w-lg xl:max-w-none text-3xl sm:text-4xl xl:text-5xl font-extrabold font-heading mb-6">Join 6,000+ startups growing with Flex</h1>
        <div class="mb-8">
          <div class="flex mb-4 items-center">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-purple.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <div class="flex mb-4 items-center">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-purple.svg" alt="">
            <span class="text-lg font-extrabold">Suspendisse mollis tincidunt</span>
          </div>
          <div class="flex items-center">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-purple.svg" alt="">
            <span class="text-lg font-extrabold">Praesent varius justo vel justo pulvinar</span>
          </div>
        </div>
        <div class="flex flex-wrap items-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-4 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="#">Learn More</a></div>
      </div>
      <div class="w-full lg:w-1/2 px-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 Call to action 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 #6621

Get the code for 13,400+ components

Tailwind Component #6622

Get the code for 13,400+ components

Tailwind Component #6623

Get the code for 13,400+ components

Tailwind Component #6624

Get the code for 13,400+ components

Tailwind Component #6625

Get the code for 13,400+ components

Tailwind Component #6626

Get the code for 13,400+ components

Tailwind Component #6627

Get the code for 13,400+ components

Tailwind Component #6628

Get the code for 13,400+ components

Tailwind Component #6629

Get the code for 13,400+ components

Tailwind Component #6630

Get the code for 13,400+ components

Tailwind Component #6631

Get the code for 13,400+ components

Tailwind Component #6632

Get the code for 13,400+ components

Tailwind Component #6633

Get the code for 13,400+ components

Tailwind Component #6634

Get the code for 13,400+ components

Tailwind Component #6635

Get the code for 13,400+ components

Tailwind Component #6636

Get the code for 13,400+ components

Tailwind Component #6637

Get the code for 13,400+ components

Tailwind Component #6638

Get the code for 13,400+ components

Tailwind Component #6639

Get the code for 13,400+ components

Tailwind Component #6640

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