UI 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 #1

Tailwind CSS

Nigodo

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-green-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><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="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Nigodo Hero Section with Email Signup and Palm Tree Image

A marketing hero section for the Nigodo SaaS platform featuring a top navigation bar, a bold headline with supporting text, an email input with a Get Started button, and a rounded palm tree photograph on a teal background. The layout splits content into a left text column and a right image panel.

Hero section generator

Tailwind Component #2

Tailwind CSS

Nigodo

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-pink-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><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="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Nigodo Hero Section with Email Signup and Palm Tree Image

A split-screen marketing hero with a top navigation bar, a bold headline and subheading on the left, and an email input with Get Started button and trust checkmarks beneath. A rounded palm tree photograph sits on a pink background panel on the right.

Hero section generator

Tailwind Component #3

Tailwind CSS

Nigodo

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-orange-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><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="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #4

Tailwind CSS

Nigodo

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-purple-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><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="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #5

Tailwind CSS

Nigodo

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-gray-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><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="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #6

Tailwind CSS

Nigodo

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-orange-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><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="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #7

Tailwind CSS

Nigodo

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-indigo-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><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="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #8

Tailwind CSS

Nigodo

<section class="relative pb-24" x-data="{ mobileNavOpen: false }">
  <img class="hidden md:block absolute top-0 right-0 w-36 sm:w-1/2 lg:w-auto lg:h-full object-contain" src="nigodo-assets/background/background-red-right.svg" alt="">
  <nav class="flex mb-24 justify-between items-center py-6 px-10 relative">
    <a class="text-lg font-bold" href="#">
      <img class="h-8" src="nigodo-assets/logo-nigodo.svg" alt="" width="auto">
    </a>
    <div class="xl:hidden">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="focus:outline-none text-indigo-900 hover:text-indigo-800">
        <svg class="block h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <title>Mobile menu</title>
          <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
        </svg>
      </button>
    </div>
    <ul class="hidden xl:flex absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Product</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Features</a></li>
      <li><a class="text-lg mr-10 2xl:mr-16 font-extrabold hover:text-indigo-800" href="#">Pricing</a></li>
      <li><a class="text-lg font-extrabold hover:text-indigo-800" href="#">Resources</a></li>
    </ul>
    <div class="hidden xl:flex items-center"><a class="inline-block mr-6 text-lg font-extrabold hover:text-indigo-800" href="#">Log In</a><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="#">Sign Up</a></div>
  </nav>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap -mx-4">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Hero section generator

Tailwind Component #9

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #10

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #11

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #12

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #13

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #14

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #15

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #16

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #17

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #18

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #19

Tailwind CSS

Nigodo

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

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

Hero section generator

Tailwind Component #20

Tailwind CSS

Nigodo

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

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

Hero section generator

Nigodo UI Components by Shuffle

Choose from 319 of ready-made UI components available in Shuffle Editor.

By subscribing to the editor, you get access to all of them.

The UI libraries are available in four frameworks - Tailwind CSS, Bootstrap, Bulma, and Material-UI (React). We divided them into components, under which there is clear code. In Shuffle Editor, you can build whole templates from them, editing styles, texts, images, and other features. You can also export them as code and work in your favorite IDE.

Try for Free →

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

UI Components – Nigodo Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Nigodo Hero Section with Email Signup and Palm Tree Image

Tailwind Component #2

Get the code for 13,400+ components

Nigodo Hero Section with Email Signup and Palm Tree Image

Tailwind Component #3

Get the code for 13,400+ components

Tailwind Component #4

Get the code for 13,400+ components

Tailwind Component #5

Get the code for 13,400+ components

Tailwind Component #6

Get the code for 13,400+ components

Tailwind Component #7

Get the code for 13,400+ components

Tailwind Component #8

Get the code for 13,400+ components

Tailwind Component #9

Get the code for 13,400+ components

Tailwind Component #10

Get the code for 13,400+ components

Tailwind Component #11

Get the code for 13,400+ components

Tailwind Component #12

Get the code for 13,400+ components

Tailwind Component #13

Get the code for 13,400+ components

Tailwind Component #14

Get the code for 13,400+ components

Tailwind Component #15

Get the code for 13,400+ components

Tailwind Component #16

Get the code for 13,400+ components

Tailwind Component #17

Get the code for 13,400+ components

Tailwind Component #18

Get the code for 13,400+ components

Tailwind Component #19

Get the code for 13,400+ components

Tailwind Component #20

Get the code for 13,400+ components

Nigodo UI Components by Shuffle

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