Tailwind CSS Components

Framework

UI Library

Components

Tailwind Component #5481

Tailwind CSS

Nigodo

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-orange-200"></div>
  <img class="hidden lg:block absolute bottom-0 right-0 w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-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-14 lg:mb-0">
        <div class="max-w-md xl: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-orange-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">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-pink-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-pink.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center mb-16">
      <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>
      <p class="text-xl font-extrabold leading-8">Pricing that scales with your business immediately.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="max-w-md mx-auto bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="px-6 pt-12 lg:px-12 pb-10 border-b-3 border-indigo-900">
            <h2 class="text-2xl font-extrabold mb-6">Small</h2>
            <div class="flex items-start mb-6">
              <span class="pr-1 text-lg font-extrabold">$</span>
              <span class="text-4xl sm:text-5xl font-extrabold">10</span>
              <span class="pl-1 text-lg font-extrabold self-end">/mo</span>
            </div>
            <p class="text-lg font-extrabold leading-7 mb-8">Basic features for up to 10 users.</p>
            <a class="inline-block w-full py-4 px-6 mb-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="#">Get Started</a><a class="inline-block w-full 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 class="p-6 lg:px-12 pt-10 pb-12">
            <div class="flex mb-4 items-start">
              <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-pink.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #5483

Tailwind CSS

Nigodo

<section class="py-26 bg-pink-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-pink.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center">
      <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">Our team is the best in the business.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">Highly professional and capable of running your business across all digital channels.</p>
      <div class="flex flex-wrap mb-16 justify-center"><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 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="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow text-center">
          <img class="max-w-max mx-auto block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Macauley
            <span class="block">Herring</span>
          </h2>
          <span class="block mb-6 font-bold text-indigo-300 leading-6">CEO &amp; Founder</span>
          <div class="mt-auto">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>

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

Tailwind CSS

Nigodo

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-gray-200"></div>
  <img class="hidden lg:block absolute bottom-0 right-0 w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-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-14 lg:mb-0">
        <div class="max-w-md xl: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-gray-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">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-purple-200 relative overflow-hidden">
  <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 -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <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">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 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-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="inline-flex mb-8 w-20 h-20 items-center justify-center bg-white text-indigo-900 border-3 border-indigo-900 rounded-full shadow-md">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.9467 11.76L18.6667 3.7067C17.9653 3.03984 17.0345 2.66797 16.0667 2.66797C15.0989 2.66797 14.1681 3.03984 13.4667 3.7067L5.18667 11.7067C4.81877 12.0279 4.52289 12.4231 4.31839 12.8666C4.11389 13.31 4.00539 13.7917 4 14.28V25.72C4.01405 26.6902 4.41206 27.6152 5.10682 28.2925C5.80159 28.9698 6.73647 29.3441 7.70667 29.3334H24.2933C25.2635 29.3441 26.1984 28.9698 26.8932 28.2925C27.5879 27.6152 27.9859 26.6902 28 25.72V14.28C27.999 13.8113 27.9054 13.3474 27.7246 12.915C27.5439 12.4826 27.2795 12.0901 26.9467 11.76ZM15.2533 5.6267C15.4573 5.44025 15.7237 5.33686 16 5.33686C16.2763 5.33686 16.5427 5.44025 16.7467 5.6267L24 12.6667L16.7067 19.7067C16.5027 19.8932 16.2363 19.9965 15.96 19.9965C15.6837 19.9965 15.4173 19.8932 15.2133 19.7067L8 12.6667L15.2533 5.6267ZM25.3333 25.72C25.3162 25.9817 25.1982 26.2266 25.0043 26.4031C24.8103 26.5797 24.5555 26.6742 24.2933 26.6667H7.70667C7.44451 26.6742 7.18966 26.5797 6.99571 26.4031C6.80176 26.2266 6.68382 25.9817 6.66667 25.72V15.1334L12.0667 20.3334L9.85333 22.4667C9.605 22.7165 9.46561 23.0545 9.46561 23.4067C9.46561 23.7589 9.605 24.0969 9.85333 24.3467C9.97726 24.4767 10.1262 24.5803 10.2911 24.6514C10.4561 24.7224 10.6337 24.7593 10.8133 24.76C11.1566 24.7587 11.4862 24.6249 11.7333 24.3867L14.0933 22.12C14.6795 22.4782 15.3531 22.6677 16.04 22.6677C16.7269 22.6677 17.4005 22.4782 17.9867 22.12L20.3467 24.3867C20.5938 24.6249 20.9234 24.7587 21.2667 24.76C21.4463 24.7593 21.6239 24.7224 21.7889 24.6514C21.9538 24.5803 22.1027 24.4767 22.2267 24.3467C22.475 24.0969 22.6144 23.7589 22.6144 23.4067C22.6144 23.0545 22.475 22.7165 22.2267 22.4667L20 20.3334L25.3333 15.1334V25.72Z" fill="currentColor"></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 #5486

Tailwind CSS

Nigodo

<section class="py-26 bg-indigo-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-indigo.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="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">Our team is the best in the business.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">Highly professional and capable of running your business across all digital channels.</p>
      <div class="flex flex-wrap mb-16 justify-center"><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 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="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow text-center">
          <img class="max-w-max mx-auto block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Macauley
            <span class="block">Herring</span>
          </h2>
          <span class="block mb-6 font-bold text-indigo-300 leading-6">CEO &amp; Founder</span>
          <div class="mt-auto">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>

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

Tailwind CSS

Nigodo

<section class="py-26 bg-purple-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-purple.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="text-center">
      <span class="text-lg font-extrabold text-purple-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Our team is the best in the business.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">Highly professional and capable of running your business across all digital channels.</p>
      <div class="flex flex-wrap mb-16 justify-center"><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 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="max-w-md mx-auto flex flex-col h-full px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow text-center">
          <img class="max-w-max mx-auto block mb-8" src="nigodo-assets/team/avatar4.png" alt="">
          <h2 class="text-xl font-extrabold mb-2">
            Macauley
            <span class="block">Herring</span>
          </h2>
          <span class="block mb-6 font-bold text-indigo-300 leading-6">CEO &amp; Founder</span>
          <div class="mt-auto">
            <a class="inline-block h-6 text-indigo-900 hover:text-indigo-800 mr-4" href="#">
              <svg width="17" height="24" viewBox="0 0 17 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7247 29.5454V16.2767H15.2637L15.9446 11.1041H10.7247V7.80212C10.7247 6.305 11.1469 5.28473 13.3381 5.28473L16.1284 5.28361V0.657045C15.6458 0.59554 13.9895 0.454529 12.0616 0.454529C8.03601 0.454529 5.28 2.86466 5.28 7.28983V11.1041H0.727295V16.2767H5.28V29.5454H10.7247Z" fill="currentColor"></path>
              </svg>
            </a>

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

Tailwind CSS

Nigodo

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 md:h-full left-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-orange-left.svg" alt="">
  <img class="absolute top-0 md:h-full right-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-orange-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4 mb-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-xl">
          <span class="text-lg font-extrabold text-orange-500">Section label</span>
          <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-3 mb-3">Let’s stay connected</h1>
          <p class="text-xl font-extrabold leading-8">It's never been easier to get in touch with Flex. Call us, use our live chat widget or email and we'll get back to you as soon as possible!</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full md:w-auto mb-2 md:mb-0 md:mr-4 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-16 items-center">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="inline-flex mb-8 w-20 h-20 items-center justify-center bg-white text-indigo-900 border-3 border-indigo-900 rounded-full shadow-md">
              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.9467 11.76L18.6667 3.7067C17.9653 3.03984 17.0345 2.66797 16.0667 2.66797C15.0989 2.66797 14.1681 3.03984 13.4667 3.7067L5.18667 11.7067C4.81877 12.0279 4.52289 12.4231 4.31839 12.8666C4.11389 13.31 4.00539 13.7917 4 14.28V25.72C4.01405 26.6902 4.41206 27.6152 5.10682 28.2925C5.80159 28.9698 6.73647 29.3441 7.70667 29.3334H24.2933C25.2635 29.3441 26.1984 28.9698 26.8932 28.2925C27.5879 27.6152 27.9859 26.6902 28 25.72V14.28C27.999 13.8113 27.9054 13.3474 27.7246 12.915C27.5439 12.4826 27.2795 12.0901 26.9467 11.76ZM15.2533 5.6267C15.4573 5.44025 15.7237 5.33686 16 5.33686C16.2763 5.33686 16.5427 5.44025 16.7467 5.6267L24 12.6667L16.7067 19.7067C16.5027 19.8932 16.2363 19.9965 15.96 19.9965C15.6837 19.9965 15.4173 19.8932 15.2133 19.7067L8 12.6667L15.2533 5.6267ZM25.3333 25.72C25.3162 25.9817 25.1982 26.2266 25.0043 26.4031C24.8103 26.5797 24.5555 26.6742 24.2933 26.6667H7.70667C7.44451 26.6742 7.18966 26.5797 6.99571 26.4031C6.80176 26.2266 6.68382 25.9817 6.66667 25.72V15.1334L12.0667 20.3334L9.85333 22.4667C9.605 22.7165 9.46561 23.0545 9.46561 23.4067C9.46561 23.7589 9.605 24.0969 9.85333 24.3467C9.97726 24.4767 10.1262 24.5803 10.2911 24.6514C10.4561 24.7224 10.6337 24.7593 10.8133 24.76C11.1566 24.7587 11.4862 24.6249 11.7333 24.3867L14.0933 22.12C14.6795 22.4782 15.3531 22.6677 16.04 22.6677C16.7269 22.6677 17.4005 22.4782 17.9867 22.12L20.3467 24.3867C20.5938 24.6249 20.9234 24.7587 21.2667 24.76C21.4463 24.7593 21.6239 24.7224 21.7889 24.6514C21.9538 24.5803 22.1027 24.4767 22.2267 24.3467C22.475 24.0969 22.6144 23.7589 22.6144 23.4067C22.6144 23.0545 22.475 22.7165 22.2267 22.4667L20 20.3334L25.3333 15.1334V25.72Z" fill="currentColor"></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 #5489

Tailwind CSS

Nigodo

<section class="pt-26 lg:py-26 lg:min-h-screen bg-white relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="hidden lg:block absolute top-0 right-0 w-1/2 h-full border-l-3 border-indigo-900 bg-purple-200"></div>
  <img class="hidden lg:block absolute bottom-0 right-0 w-1/3" src="nigodo-assets/background-elements/pattern-smash-rotate-purple-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-14 lg:mb-0">
        <div class="max-w-md xl: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">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-2/3 md:w-1/2 mt-4 md:mt-16" src="nigodo-assets/background-elements/pattern-smash-dots-orange-left.svg" alt="">
  <img class="absolute bottom-0 right-0 w-1/2 mb-4" src="nigodo-assets/background-elements/pattern-smash-rotate-orange-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <h1 class="max-w-2xl text-3xl md:text-4xl font-extrabold font-heading mb-16">We create world-class development and branding</h1>
    <div class="flex flex-wrap -mx-4 -mb-16">
      <div class="w-full md:w-1/2 px-4 mb-16">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
          <img class="block mb-6" 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 mb-8">Stay connected with your team and make quick decisions wherever you are.</p>
          <a class="text-lg font-extrabold text-indigo-500 hover:underline" href="#">Learn More</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-16">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">
          <img class="block mb-6" 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 mb-8">Get a complete sales dashboard in the cloud. See activity, revenue and social metrics all in one place.</p>
          <a class="text-lg font-extrabold text-indigo-500 hover:underline" href="#">Learn More</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-16">
        <div class="h-full py-12 px-8 bg-white border-3 border-indigo-900 shadow-md rounded-2xl">

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

Tailwind CSS

Nigodo

<div class="fixed left-0 bottom-0 max-w-xl z-50 md:pl-16 pb-16" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto px-4">
    <div class="py-14 px-6 md:px-14 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
      <h3 class="text-2xl font-extrabold mb-4">Cookies Policy</h3>
      <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 mb-6 items-center text-xl leading-7 text-indigo-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>
      <a x-on:click.prevent="open=false" class="block w-full py-4 px-6 mb-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="#">Allow</a><a x-on:click.prevent="open=false" class="block w-full md:w-auto py-4 px-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>
    </div>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #5492

Tailwind CSS

Nigodo

<section class="py-26 bg-red-200 relative overflow-hidden">
  <img class="absolute top-0 right-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-red-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-red-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 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 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 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 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 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-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 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 lg:border-0">
        <div class="flex items-center justify-center h-44 p-6 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

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

Tailwind Component #5493

Tailwind CSS

Nigodo

<section class="py-26 bg-gray-200 relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute top-0 lg:h-full left-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-gray-left.svg" alt="">
  <img class="absolute top-0 lg:h-full right-0 w-1/2 md:w-auto" src="nigodo-assets/background-elements/pattern-two-smashes-gray-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="py-16 px-4 lg:px-20 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
      <div class="mb-12">
        <span class="inline-block mb-3 text-lg font-extrabold text-gray-500">Quotes</span>
        <div class="flex flex-wrap lg:flex-nowrap -mx-4">
          <div class="hidden md:block self-start px-4 text-gray-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-gray-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>

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

Tailwind CSS

Nigodo

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-orange-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-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-3/5 px-4 mb-8 lg:mb-0">
        <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-4">The fastest way from idea to live site. Period.</h1>
        <p class="text-xl font-extrabold leading-8">Nigodo is a Small SaaS Business. Flex isn’t a traditional company.</p>
      </div>
      <div class="w-full lg:w-2/5 px-4">
        <div class="flex flex-wrap items-center lg:justify-end"><a class="inline-block w-full xl:w-auto py-4 px-6 mb-4 xl:mb-0 xl: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 xl: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>
  </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 #5495

Tailwind CSS

Nigodo

<section>
  <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">
        <div class="flex flex-wrap justify-between items-center">
          <div class="w-full md:w-1/3 mb-12">
            <a class="inline-block mx-auto mb-8" href="#">
              <img class="h-12" src="nigodo-assets/logo-nigodo.svg" alt="">
            </a>
            <p class="max-w-xs text-lg font-extrabold leading-8">Launch your own Software as a Service Application with Nigodo Solutions.</p>
          </div>
          <div class="w-full md:w-1/3 mb-12 md:text-right">
            <div class="mb-4">
              <a class="inline-block w-auto" href="#">
                <img src="nigodo-assets/footers/google-play.svg" alt="">
              </a>
            </div>
            <div>
              <a class="inline-block w-auto" href="#">
                <img src="nigodo-assets/footers/app-store.svg" alt="">
              </a>
            </div>
          </div>
          <div class="w-full">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-two-smashes-orange-right.svg" alt="">
  <img class="absolute top-0 left-0 md:w-2/3 md:h-full" src="nigodo-assets/background-elements/pattern-dots-big-orange-left.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
        <div class="max-w-xl mx-auto">
          <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-8">Great work starts with your app</h1>
          <p class="text-xl font-extrabold leading-7 mb-6">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="lg:flex">
            <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>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block mx-auto" src="nigodo-assets/apps/two-phones.svg" alt="">
      </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 #5497

Tailwind CSS

Nigodo

<section class="py-26 bg-gray-200 relative overflow-hidden">
  <img class="absolute top-0 left-0 w-full md:h-full" src="nigodo-assets/background-elements/pattern-center-dots-gray.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="max-w-4xl mx-auto mb-16 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">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>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <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">
            <div class="w-full md:w-1/2 xl:w-2/3 mb-6 md:mb-0">
              <h4 class="text-2xl font-extrabold mb-6">Front-end Developer</h4>
              <p class="font-extrabold leading-6">We’re looking for a mid-level Front-end Developer to join our team.</p>
            </div>
            <a class="inline-block w-full md:w-auto py-3 px-5 text-center leading-6 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>
      <div class="w-full lg:w-1/2 px-4 mb-8">
        <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">
            <div class="w-full md:w-1/2 xl:w-2/3 mb-6 md:mb-0">

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

Tailwind CSS

Nigodo

<section class="py-26 bg-orange-200 relative overflow-hidden">
  <img class="absolute top-0 w-1/2 md:w-1/3 md:h-full" src="nigodo-assets/background-elements/pattern-smash-dots-orange-left.svg" alt="">
  <img class="absolute top-0 right-0 w-1/2 md:w-1/3 md:h-full" 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 xl:w-2/3 px-4 mb-8">
        <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">Stay in the loop with everything you need to know.</p>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4">
        <div class="md:flex max-w-lg -mx-2 mb-2">
          <div class="flex-grow w-full md:w-auto px-2 mb-2 md:mb-0">
            <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"><a class="inline-flex w-full md:w-auto items-center justify-center h-full py-4 px-5 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>
        <p class="text-xs font-extrabold">We care about your data in our privacy policy</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 #5499

Tailwind CSS

Nigodo

<section class="py-26 bg-gray-200 relative overflow-hidden">
  <img class="absolute top-0 right-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-gray-right.svg" alt="">
  <img class="absolute top-0 left-0 w-1/2 md:h-full" src="nigodo-assets/background-elements/pattern-dots-gray-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 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 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 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 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 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 xl:border-0">
        <div class="flex items-center justify-center h-44 p-6 xl:border-r-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 lg:w-1/3 xl:w-1/6 border-b-3 border-indigo-900 lg:border-0">
        <div class="flex items-center justify-center h-44 p-6 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

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

Tailwind Component #5500

Tailwind CSS

Nigodo

<section class="py-26 bg-orange-200 relative overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute top-0 lg:h-full left-0 w-1/2" src="nigodo-assets/background-elements/pattern-circle-big-orange-left.svg" alt="">
  <img class="absolute top-0 lg:h-full right-0 w-1/2 md:w-auto" src="nigodo-assets/background-elements/pattern-two-smashes-orange-right.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="py-16 px-4 lg:px-20 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
      <div class="mb-12">
        <span class="inline-block mb-3 text-lg font-extrabold text-orange-500">Quotes</span>
        <div class="flex flex-wrap lg:flex-nowrap -mx-4">
          <div class="hidden md:block self-start px-4 text-orange-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-gray-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>

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

Get the code for 13,400+ components

Tailwind Component #5482

Get the code for 13,400+ components

Tailwind Component #5483

Get the code for 13,400+ components

Tailwind Component #5484

Get the code for 13,400+ components

Tailwind Component #5485

Get the code for 13,400+ components

Tailwind Component #5486

Get the code for 13,400+ components

Tailwind Component #5487

Get the code for 13,400+ components

Tailwind Component #5488

Get the code for 13,400+ components

Tailwind Component #5489

Get the code for 13,400+ components

Tailwind Component #5490

Get the code for 13,400+ components

Tailwind Component #5491

Get the code for 13,400+ components

Tailwind Component #5492

Get the code for 13,400+ components

Tailwind Component #5493

Get the code for 13,400+ components

Tailwind Component #5494

Get the code for 13,400+ components

Tailwind Component #5495

Get the code for 13,400+ components

Tailwind Component #5496

Get the code for 13,400+ components

Tailwind Component #5497

Get the code for 13,400+ components

Tailwind Component #5498

Get the code for 13,400+ components

Tailwind Component #5499

Get the code for 13,400+ components

Tailwind Component #5500

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