Tailwind Components in Nigodo library

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

Tailwind CSS

Nigodo

<section class="py-26 bg-white" x-data="{ category: '', showContent: false }" x-init="category = $refs.category1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto mb-16 text-center">
      <span class="text-lg font-extrabold text-red-500">Section label</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-2 mb-4">Our mission is to make knowledge and news accessible for everyone.</h1>
      <p class="text-xl font-extrabold leading-8 mb-12">With our integrated CRM, project management, collaboration and invoicing capabilities, you can manage your business in one secure platform.</p>
      <div class="inline-flex w-full max-w-md p-4 items-center bg-white border-2 border-indigo-900 rounded shadow">
        <a class="text-indigo-900 hover:text-indigo-800" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21.71 20.29L18 16.61C19.4401 14.8144 20.1375 12.5353 19.9488 10.2413C19.7601 7.94731 18.6997 5.81279 16.9855 4.27665C15.2714 2.74051 13.0338 1.91951 10.7329 1.98247C8.43203 2.04543 6.24272 2.98757 4.61514 4.61515C2.98756 6.24273 2.04543 8.43204 1.98247 10.7329C1.91951 13.0338 2.7405 15.2714 4.27664 16.9855C5.81278 18.6997 7.9473 19.7601 10.2413 19.9488C12.5353 20.1375 14.8144 19.4401 16.61 18L20.29 21.68C20.383 21.7737 20.4936 21.8481 20.6154 21.8989C20.7373 21.9497 20.868 21.9758 21 21.9758C21.132 21.9758 21.2627 21.9497 21.3846 21.8989C21.5064 21.8481 21.617 21.7737 21.71 21.68C21.8902 21.4935 21.991 21.2443 21.991 20.985C21.991 20.7257 21.8902 20.4765 21.71 20.29ZM11 18C9.61553 18 8.26215 17.5895 7.111 16.8203C5.95986 16.0511 5.06265 14.9579 4.53284 13.6788C4.00303 12.3997 3.8644 10.9922 4.1345 9.63437C4.4046 8.2765 5.07128 7.02922 6.05025 6.05026C7.02922 5.07129 8.2765 4.4046 9.63436 4.13451C10.9922 3.86441 12.3997 4.00303 13.6788 4.53285C14.9579 5.06266 16.0511 5.95987 16.8203 7.11101C17.5895 8.26216 18 9.61553 18 11C18 12.8565 17.2625 14.637 15.9497 15.9498C14.637 17.2625 12.8565 18 11 18Z" fill="#171952"></path>
          </svg>
        </a>
        <input class="bg-transparent px-3 text-lg font-extrabold text-indigo-900 placeholder-indigo-900 outline-none" type="search" placeholder="Search">
      </div>
    </div>
    <div class="mb-10">
      <div class="lg:flex items-center -mb-4">
        <a x-ref="category1" x-on:click.prevent="category = $refs.category1.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category1.textContent }" href="#">All Categories</a>
        <a x-ref="category2" x-on:click.prevent="category = $refs.category2.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-red-400 hover:text-gray-500 font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category2.textContent }" href="#">Technology</a>
        <a x-ref="category3" x-on:click.prevent="category = $refs.category3.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-red-400 hover:text-gray-500 font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category3.textContent }" href="#">Development</a>
        <a x-ref="category4" x-on:click.prevent="category = $refs.category4.textContent" class="inline-block mb-4 mr-6 xl:mr-16 text-xl text-red-400 hover:text-gray-500 font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category4.textContent }" href="#">Marketing</a>
        <a x-ref="category5" x-on:click.prevent="category = $refs.category5.textContent" class="inline-block mb-4 text-xl text-red-400 hover:text-gray-500 font-extrabold" :class="{ 'text-red-400 hover:text-gray-500': category!= $refs.category5.textContent }" href="#">Startup</a>
    </div>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Blog generator

Tailwind Component #102

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

404 Error Page with Heading and Recovery Buttons

A centered error state showing an ERROR 404 badge, a bold 'Page not found' heading, a short explanatory line, and two action buttons to return home or try again. Light background with navy text and outlined/filled button styling.

HTTP codes generator

Tailwind Component #103

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Centered hero with laptop mockup and CTA buttons

A centered marketing hero section with an "Application" badge, bold heading "Great work starts with your app," an outlined laptop illustration with an empty screen, supporting text, and two call-to-action buttons (Request a demo and About Us). Light background with navy outlines and a light blue screen fill.

Application generator

Tailwind Component #104

Tailwind CSS

Nigodo

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
        <div class="relative h-full px-6 pb-12 pt-20 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center w-24 h-24 bg-white rounded-full border-3 border-indigo-900 text-indigo-900">
            <svg width="30" height="34" viewBox="0 0 30 34" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M28.6833 11.7L18.3333 1.63331C17.4566 0.799736 16.2931 0.3349 15.0833 0.3349C13.8736 0.3349 12.7101 0.799736 11.8333 1.63331L1.48333 11.6333C1.02347 12.0348 0.653608 12.5288 0.397983 13.0832C0.142357 13.6375 0.00673439 14.2396 0 14.85V29.15C0.0175674 30.3627 0.515073 31.519 1.38353 32.3656C2.25199 33.2121 3.42059 33.68 4.63333 33.6666H25.3667C26.5794 33.68 27.748 33.2121 28.6165 32.3656C29.4849 31.519 29.9824 30.3627 30 29.15V14.85C29.9987 14.2641 29.8817 13.6842 29.6558 13.1437C29.4298 12.6031 29.0994 12.1125 28.6833 11.7V11.7ZM14.0667 4.03331C14.3216 3.80025 14.6546 3.67101 15 3.67101C15.3454 3.67101 15.6784 3.80025 15.9333 4.03331L25 12.8333L15.8833 21.6333C15.6284 21.8664 15.2954 21.9956 14.95 21.9956C14.6046 21.9956 14.2716 21.8664 14.0167 21.6333L5 12.8333L14.0667 4.03331ZM26.6667 29.15C26.6452 29.4771 26.4978 29.7832 26.2554 30.0039C26.0129 30.2246 25.6944 30.3426 25.3667 30.3333H4.63333C4.30563 30.3426 3.98708 30.2246 3.74464 30.0039C3.5022 29.7832 3.35477 29.4771 3.33333 29.15V15.9166L10.0833 22.4166L7.31667 25.0833C7.00625 25.3956 6.83201 25.818 6.83201 26.2583C6.83201 26.6986 7.00625 27.121 7.31667 27.4333C7.47158 27.5958 7.65772 27.7253 7.86393 27.8141C8.07014 27.9029 8.29216 27.9491 8.51667 27.95C8.94578 27.9483 9.3577 27.7811 9.66667 27.4833L12.6167 24.65C13.3493 25.0977 14.1914 25.3346 15.05 25.3346C15.9086 25.3346 16.7507 25.0977 17.4833 24.65L20.4333 27.4833C20.7423 27.7811 21.1542 27.9483 21.5833 27.95C21.8078 27.9491 22.0299 27.9029 22.2361 27.8141C22.4423 27.7253 22.6284 27.5958 22.7833 27.4333C23.0938 27.121 23.268 26.6986 23.268 26.2583C23.268 25.818 23.0938 25.3956 22.7833 25.0833L20 22.4166L26.6667 15.9166V29.15Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="text-3xl md:text-4xl font-extrabold mb-3">Email</h3>
          <h4 class="sm:text-xl font-extrabold mb-6">Lorem ipsum dolor sit amet</h4>
          <p class="text-xl sm:text-2xl text-pink-400">contact@nigodo.co</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
        <div class="relative h-full px-6 pb-12 pt-20 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center w-24 h-24 bg-white rounded-full border-3 border-indigo-900 text-indigo-900">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M32.35 21.6666C31.9834 21.6666 31.6 21.55 31.2334 21.4666C30.4914 21.3007 29.7619 21.0836 29.05 20.8166C28.2769 20.5354 27.427 20.55 26.6639 20.8577C25.9008 21.1653 25.2785 21.7444 24.9167 22.4833L24.55 23.25C22.9314 22.332 21.4361 21.2119 20.1 19.9166C18.8048 18.5806 17.6847 17.0853 16.7667 15.4666L17.5334 15.1166C18.2723 14.7548 18.8513 14.1325 19.159 13.3695C19.4667 12.6064 19.4813 11.7565 19.2 10.9833C18.9354 10.265 18.7182 9.53011 18.55 8.78331C18.4667 8.41665 18.4 8.03331 18.35 7.66665C18.1477 6.49268 17.5328 5.42955 16.6161 4.66871C15.6994 3.90787 14.5412 3.49933 13.35 3.51665H8.33338C7.62879 3.51572 6.93196 3.66373 6.28857 3.95095C5.64519 4.23818 5.06977 4.65814 4.60004 5.18331C4.12058 5.72274 3.76357 6.35956 3.55355 7.05004C3.34353 7.74052 3.28547 8.46827 3.38338 9.18331C4.28935 16.1202 7.45873 22.5644 12.4 27.5166C17.3523 32.458 23.7965 35.6273 30.7334 36.5333C30.9497 36.5498 31.167 36.5498 31.3834 36.5333C32.6124 36.5351 33.799 36.0842 34.7167 35.2666C35.2419 34.7969 35.6618 34.2215 35.9491 33.5781C36.2363 32.9347 36.3843 32.2379 36.3834 31.5333V26.5333C36.3744 25.3817 35.9681 24.2685 35.2333 23.3818C34.4984 22.4951 33.48 21.8893 32.35 21.6666ZM33.1667 31.6666C33.1662 31.8992 33.1169 32.1291 33.0222 32.3415C32.9275 32.5539 32.7894 32.7442 32.6167 32.9C32.434 33.0664 32.2167 33.1901 31.9803 33.2622C31.7439 33.3343 31.4945 33.3529 31.25 33.3166C25.0305 32.5044 19.2505 29.67 14.8 25.25C10.3458 20.7958 7.48676 14.9956 6.66671 8.74998C6.6305 8.50554 6.6491 8.2561 6.72117 8.01973C6.79323 7.78336 6.91695 7.56598 7.08338 7.38331C7.24108 7.20857 7.43401 7.06921 7.64946 6.97441C7.86491 6.87961 8.098 6.83152 8.33338 6.83331H13.3334C13.7186 6.8239 14.0953 6.94829 14.3992 7.18531C14.703 7.42234 14.9154 7.75734 15 8.13331C15 8.58331 15.15 9.04998 15.25 9.49998C15.4427 10.3731 15.6989 11.2309 16.0167 12.0666L13.6834 13.1666C13.2823 13.3508 12.9706 13.6864 12.8167 14.1C12.65 14.5057 12.65 14.9609 12.8167 15.3666C15.2154 20.5046 19.3454 24.6346 24.4834 27.0333C24.8891 27.2 25.3443 27.2 25.75 27.0333C26.1636 26.8794 26.4993 26.5677 26.6834 26.1666L27.7334 23.8333C28.5932 24.1468 29.4729 24.403 30.3667 24.6C30.8 24.7 31.2667 24.7833 31.7167 24.85C32.0927 24.9346 32.4277 25.147 32.6647 25.4509C32.9017 25.7547 33.0261 26.1314 33.0167 26.5166L33.1667 31.6666ZM23.3334 3.33331C22.95 3.33331 22.55 3.33331 22.1667 3.33331C21.7247 3.37089 21.3157 3.58251 21.0297 3.92164C20.7437 4.26077 20.6041 4.69962 20.6417 5.14165C20.6793 5.58367 20.8909 5.99267 21.23 6.27866C21.5692 6.56466 22.008 6.70422 22.45 6.66665H23.3334C25.9855 6.66665 28.5291 7.72021 30.4044 9.59558C32.2798 11.4709 33.3334 14.0145 33.3334 16.6666C33.3334 16.9666 33.3334 17.25 33.3334 17.55C33.2964 17.9897 33.4353 18.4261 33.7196 18.7635C34.004 19.1009 34.4105 19.3118 34.85 19.35H34.9834C35.4006 19.3517 35.8033 19.1968 36.1119 18.916C36.4205 18.6352 36.6125 18.2488 36.65 17.8333C36.65 17.45 36.65 17.05 36.65 16.6666C36.65 13.1333 35.2476 9.74445 32.7507 7.24444C30.2538 4.74444 26.8667 3.33773 23.3334 3.33331ZM26.6667 16.6666C26.6667 17.1087 26.8423 17.5326 27.1549 17.8452C27.4674 18.1577 27.8913 18.3333 28.3334 18.3333C28.7754 18.3333 29.1993 18.1577 29.5119 17.8452C29.8244 17.5326 30 17.1087 30 16.6666C30 14.8985 29.2977 13.2028 28.0474 11.9526C26.7972 10.7024 25.1015 9.99998 23.3334 9.99998C22.8913 9.99998 22.4674 10.1756 22.1549 10.4881C21.8423 10.8007 21.6667 11.2246 21.6667 11.6666C21.6667 12.1087 21.8423 12.5326 22.1549 12.8452C22.4674 13.1577 22.8913 13.3333 23.3334 13.3333C24.2174 13.3333 25.0653 13.6845 25.6904 14.3096C26.3155 14.9347 26.6667 15.7826 26.6667 16.6666Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="text-3xl md:text-4xl font-extrabold mb-3">Phone</h3>
          <h4 class="sm:text-xl font-extrabold mb-6">Lorem ipsum dolor sit amet</h4>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Contact generator

Tailwind Component #105

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Four-Stat Metric Card Row with Navy Outlined Boxes

A horizontal row of four outlined cards, each showing a large bold navy figure with a short label beneath, such as project counts and savings. The layout is a simple evenly spaced row with offset gray shadows and no interactive controls visible.

Stats generator

Tailwind Component #106

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Job Listings Section with Stacked Role Cards

A centered careers section with a section label, heading, and philosophy text, followed by a vertical stack of outlined job cards. Each card shows a role title on the left and a dark navy 'View Job' button on the right.

Careers generator

Tailwind Component #107

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Cookie consent banner with Decline and Allow buttons

A bordered, light-background cookie consent notice stating third-party cookies are used for personalisation, with a link to the cookie policy and two buttons to decline or allow cookies. The content is arranged horizontally with text on the left and actions on the right.

Cookies generator

Tailwind Component #108

Tailwind CSS

Nigodo

<section class="py-26 bg-white" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-12">
      <span class="inline-block mb-3 text-lg font-extrabold text-orange-500">Quotes</span>
      <div class="flex flex-wrap sm:flex-nowrap -mx-4">
        <div class="hidden sm:block self-start px-4 text-orange-300 opacity-10">
          <svg class="h-10 sm:h-auto" 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-orange-400 font-bold">CEO &amp; Founder at Nigodo</span>
                  </div>
                  <div x-ref="slide2" class="flex-shrink-0 w-full">
                      <h1 class="mb-12 text-2xl sm:text-3xl xl:text-4xl font-extrabold font-heading">Empowering Independence: A Game-Changer for Balancing Work and Life.</h1>
                      <img class="block mb-6 mx-auto" src="nigodo-assets/testimonials/avatar-men.png" alt="">
                      <h4 class="text-xl font-extrabold">Sienna Hawthorne</h4>
                      <span class="text-orange-400 font-bold">Co-Founder of FlexPro Solutions</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Centered Testimonial Quote Slider with Avatar and Pagination Dots

A centered testimonial section showing a large bold quote from Macauley Herring, CEO & Founder at Nigodo, with a circular avatar, name and title, and three pagination dots indicating a carousel. Decorative oversized quotation marks in pale cream frame the light background.

Testimonials generator

Tailwind Component #109

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Centered hero with laptop mockup and CTA buttons

A centered marketing hero section with an "Application" badge, a bold heading "Great work starts with your app", an outlined laptop illustration with an empty screen, supporting text, and two call-to-action buttons (Request a demo and About Us). The layout is vertically stacked and centered on a light background.

Application generator

Tailwind Component #110

Tailwind CSS

Nigodo

<section x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between items-center bg-white py-6 px-10 relative">
    <a class="xl:hidden text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <ul class="hidden xl:flex">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:block absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <a class="text-lg font-bold" href="#">
        <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
      </a>
    </ul>

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

Nigodo Top Navigation Bar with Product, Features, Pricing, Resources Links and Sign Up Button

A horizontal header navigation bar with text links on the left, the Nigodo logo centered, and Log In text link plus a solid dark indigo Sign Up button on the right. It provides primary site navigation and account entry points on a light background.

Navigation (horizontal) generator

Tailwind Component #111

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #112

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Footers generator

Tailwind Component #113

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Stats generator

Tailwind Component #114

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Application generator

Tailwind Component #115

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Application generator

Tailwind Component #116

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Careers generator

Tailwind Component #117

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Cookies generator

Tailwind Component #118

Tailwind CSS

Nigodo

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
        <div class="relative h-full px-6 pb-12 pt-20 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center w-24 h-24 bg-white rounded-full border-3 border-indigo-900 text-indigo-900">
            <svg width="30" height="34" viewBox="0 0 30 34" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M28.6833 11.7L18.3333 1.63331C17.4566 0.799736 16.2931 0.3349 15.0833 0.3349C13.8736 0.3349 12.7101 0.799736 11.8333 1.63331L1.48333 11.6333C1.02347 12.0348 0.653608 12.5288 0.397983 13.0832C0.142357 13.6375 0.00673439 14.2396 0 14.85V29.15C0.0175674 30.3627 0.515073 31.519 1.38353 32.3656C2.25199 33.2121 3.42059 33.68 4.63333 33.6666H25.3667C26.5794 33.68 27.748 33.2121 28.6165 32.3656C29.4849 31.519 29.9824 30.3627 30 29.15V14.85C29.9987 14.2641 29.8817 13.6842 29.6558 13.1437C29.4298 12.6031 29.0994 12.1125 28.6833 11.7V11.7ZM14.0667 4.03331C14.3216 3.80025 14.6546 3.67101 15 3.67101C15.3454 3.67101 15.6784 3.80025 15.9333 4.03331L25 12.8333L15.8833 21.6333C15.6284 21.8664 15.2954 21.9956 14.95 21.9956C14.6046 21.9956 14.2716 21.8664 14.0167 21.6333L5 12.8333L14.0667 4.03331ZM26.6667 29.15C26.6452 29.4771 26.4978 29.7832 26.2554 30.0039C26.0129 30.2246 25.6944 30.3426 25.3667 30.3333H4.63333C4.30563 30.3426 3.98708 30.2246 3.74464 30.0039C3.5022 29.7832 3.35477 29.4771 3.33333 29.15V15.9166L10.0833 22.4166L7.31667 25.0833C7.00625 25.3956 6.83201 25.818 6.83201 26.2583C6.83201 26.6986 7.00625 27.121 7.31667 27.4333C7.47158 27.5958 7.65772 27.7253 7.86393 27.8141C8.07014 27.9029 8.29216 27.9491 8.51667 27.95C8.94578 27.9483 9.3577 27.7811 9.66667 27.4833L12.6167 24.65C13.3493 25.0977 14.1914 25.3346 15.05 25.3346C15.9086 25.3346 16.7507 25.0977 17.4833 24.65L20.4333 27.4833C20.7423 27.7811 21.1542 27.9483 21.5833 27.95C21.8078 27.9491 22.0299 27.9029 22.2361 27.8141C22.4423 27.7253 22.6284 27.5958 22.7833 27.4333C23.0938 27.121 23.268 26.6986 23.268 26.2583C23.268 25.818 23.0938 25.3956 22.7833 25.0833L20 22.4166L26.6667 15.9166V29.15Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="text-3xl md:text-4xl font-extrabold mb-3">Email</h3>
          <h4 class="sm:text-xl font-extrabold mb-6">Lorem ipsum dolor sit amet</h4>
          <p class="text-xl sm:text-2xl text-purple-400">contact@nigodo.co</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-20 lg:mb-0">
        <div class="relative h-full px-6 pb-12 pt-20 bg-white border-3 border-indigo-900 rounded-2xl shadow-md text-center">
          <div class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 inline-flex items-center justify-center w-24 h-24 bg-white rounded-full border-3 border-indigo-900 text-indigo-900">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M32.35 21.6666C31.9834 21.6666 31.6 21.55 31.2334 21.4666C30.4914 21.3007 29.7619 21.0836 29.05 20.8166C28.2769 20.5354 27.427 20.55 26.6639 20.8577C25.9008 21.1653 25.2785 21.7444 24.9167 22.4833L24.55 23.25C22.9314 22.332 21.4361 21.2119 20.1 19.9166C18.8048 18.5806 17.6847 17.0853 16.7667 15.4666L17.5334 15.1166C18.2723 14.7548 18.8513 14.1325 19.159 13.3695C19.4667 12.6064 19.4813 11.7565 19.2 10.9833C18.9354 10.265 18.7182 9.53011 18.55 8.78331C18.4667 8.41665 18.4 8.03331 18.35 7.66665C18.1477 6.49268 17.5328 5.42955 16.6161 4.66871C15.6994 3.90787 14.5412 3.49933 13.35 3.51665H8.33338C7.62879 3.51572 6.93196 3.66373 6.28857 3.95095C5.64519 4.23818 5.06977 4.65814 4.60004 5.18331C4.12058 5.72274 3.76357 6.35956 3.55355 7.05004C3.34353 7.74052 3.28547 8.46827 3.38338 9.18331C4.28935 16.1202 7.45873 22.5644 12.4 27.5166C17.3523 32.458 23.7965 35.6273 30.7334 36.5333C30.9497 36.5498 31.167 36.5498 31.3834 36.5333C32.6124 36.5351 33.799 36.0842 34.7167 35.2666C35.2419 34.7969 35.6618 34.2215 35.9491 33.5781C36.2363 32.9347 36.3843 32.2379 36.3834 31.5333V26.5333C36.3744 25.3817 35.9681 24.2685 35.2333 23.3818C34.4984 22.4951 33.48 21.8893 32.35 21.6666ZM33.1667 31.6666C33.1662 31.8992 33.1169 32.1291 33.0222 32.3415C32.9275 32.5539 32.7894 32.7442 32.6167 32.9C32.434 33.0664 32.2167 33.1901 31.9803 33.2622C31.7439 33.3343 31.4945 33.3529 31.25 33.3166C25.0305 32.5044 19.2505 29.67 14.8 25.25C10.3458 20.7958 7.48676 14.9956 6.66671 8.74998C6.6305 8.50554 6.6491 8.2561 6.72117 8.01973C6.79323 7.78336 6.91695 7.56598 7.08338 7.38331C7.24108 7.20857 7.43401 7.06921 7.64946 6.97441C7.86491 6.87961 8.098 6.83152 8.33338 6.83331H13.3334C13.7186 6.8239 14.0953 6.94829 14.3992 7.18531C14.703 7.42234 14.9154 7.75734 15 8.13331C15 8.58331 15.15 9.04998 15.25 9.49998C15.4427 10.3731 15.6989 11.2309 16.0167 12.0666L13.6834 13.1666C13.2823 13.3508 12.9706 13.6864 12.8167 14.1C12.65 14.5057 12.65 14.9609 12.8167 15.3666C15.2154 20.5046 19.3454 24.6346 24.4834 27.0333C24.8891 27.2 25.3443 27.2 25.75 27.0333C26.1636 26.8794 26.4993 26.5677 26.6834 26.1666L27.7334 23.8333C28.5932 24.1468 29.4729 24.403 30.3667 24.6C30.8 24.7 31.2667 24.7833 31.7167 24.85C32.0927 24.9346 32.4277 25.147 32.6647 25.4509C32.9017 25.7547 33.0261 26.1314 33.0167 26.5166L33.1667 31.6666ZM23.3334 3.33331C22.95 3.33331 22.55 3.33331 22.1667 3.33331C21.7247 3.37089 21.3157 3.58251 21.0297 3.92164C20.7437 4.26077 20.6041 4.69962 20.6417 5.14165C20.6793 5.58367 20.8909 5.99267 21.23 6.27866C21.5692 6.56466 22.008 6.70422 22.45 6.66665H23.3334C25.9855 6.66665 28.5291 7.72021 30.4044 9.59558C32.2798 11.4709 33.3334 14.0145 33.3334 16.6666C33.3334 16.9666 33.3334 17.25 33.3334 17.55C33.2964 17.9897 33.4353 18.4261 33.7196 18.7635C34.004 19.1009 34.4105 19.3118 34.85 19.35H34.9834C35.4006 19.3517 35.8033 19.1968 36.1119 18.916C36.4205 18.6352 36.6125 18.2488 36.65 17.8333C36.65 17.45 36.65 17.05 36.65 16.6666C36.65 13.1333 35.2476 9.74445 32.7507 7.24444C30.2538 4.74444 26.8667 3.33773 23.3334 3.33331ZM26.6667 16.6666C26.6667 17.1087 26.8423 17.5326 27.1549 17.8452C27.4674 18.1577 27.8913 18.3333 28.3334 18.3333C28.7754 18.3333 29.1993 18.1577 29.5119 17.8452C29.8244 17.5326 30 17.1087 30 16.6666C30 14.8985 29.2977 13.2028 28.0474 11.9526C26.7972 10.7024 25.1015 9.99998 23.3334 9.99998C22.8913 9.99998 22.4674 10.1756 22.1549 10.4881C21.8423 10.8007 21.6667 11.2246 21.6667 11.6666C21.6667 12.1087 21.8423 12.5326 22.1549 12.8452C22.4674 13.1577 22.8913 13.3333 23.3334 13.3333C24.2174 13.3333 25.0653 13.6845 25.6904 14.3096C26.3155 14.9347 26.6667 15.7826 26.6667 16.6666Z" fill="currentColor"></path>
            </svg>
          </div>
          <h3 class="text-3xl md:text-4xl font-extrabold mb-3">Phone</h3>
          <h4 class="sm:text-xl font-extrabold mb-6">Lorem ipsum dolor sit amet</h4>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Contact generator

Tailwind Component #119

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Footers generator

Tailwind Component #120

Tailwind CSS

Nigodo

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

How it works 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

Tailwind CSS Components – Nigodo Library

Framework

UI Library

Components

Tailwind Component #101

Get the code for 13,400+ components

Tailwind Component #102

Get the code for 13,400+ components

404 Error Page with Heading and Recovery Buttons

Tailwind Component #103

Get the code for 13,400+ components

Centered hero with laptop mockup and CTA buttons

Tailwind Component #104

Get the code for 13,400+ components

Tailwind Component #105

Get the code for 13,400+ components

Four-Stat Metric Card Row with Navy Outlined Boxes

Tailwind Component #106

Get the code for 13,400+ components

Job Listings Section with Stacked Role Cards

Tailwind Component #107

Get the code for 13,400+ components

Cookie consent banner with Decline and Allow buttons

Tailwind Component #108

Get the code for 13,400+ components

Centered Testimonial Quote Slider with Avatar and Pagination Dots

Tailwind Component #109

Get the code for 13,400+ components

Centered hero with laptop mockup and CTA buttons

Tailwind Component #110

Get the code for 13,400+ components

Nigodo Top Navigation Bar with Product, Features, Pricing, Resources Links and Sign Up Button

Tailwind Component #111

Get the code for 13,400+ components

Tailwind Component #112

Get the code for 13,400+ components

Tailwind Component #113

Get the code for 13,400+ components

Tailwind Component #114

Get the code for 13,400+ components

Tailwind Component #115

Get the code for 13,400+ components

Tailwind Component #116

Get the code for 13,400+ components

Tailwind Component #117

Get the code for 13,400+ components

Tailwind Component #118

Get the code for 13,400+ components

Tailwind Component #119

Get the code for 13,400+ components

Tailwind Component #120

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