Tailwind Components in Neub 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

NEUB

<section x-data="{ mobileNavOpen: false }" class="relative bg-gray-900 pb-8 md:pb-16 lg:pb-24 overflow-hidden">
    <div class="relative container px-6 mx-auto">
        <nav class="relative flex justify-between items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-pink-500 hover:bg-yellow-300 transition-colors border-2 border-black">
                    <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white" href="#">CONTACT</a></li>
            </ul>
            <div class="hidden lg:block">
                <button class="px-8 py-4 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#ffdf20] hover:shadow-[4px_4px_0px_0px_#ffdf20]">
                    GET STARTED
                </button>
            </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

Tailwind Component #2

Tailwind CSS

NEUB

<section x-data="{ mobileNavOpen: false }" class="relative pb-8 md:pb-16 lg:pb-24 overflow-hidden">
    <div class="relative container px-6 mx-auto">
        <nav class="relative flex justify-between items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-pink-500 hover:bg-yellow-300 transition-colors border-2 border-black">
                    <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black" href="#">CONTACT</a></li>
            </ul>
            <div class="hidden lg:block">
                <button class="px-8 py-4 bg-yellow-300 hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    GET STARTED
                </button>
            </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

Neo-Brutalist Hero Section with Navigation and Stats

A full-width landing page header combining a bordered top navigation bar, a bold headline "BUILD BOLD INTERFACES" with CTA buttons, a framed photo with pink and yellow accent blocks, and a row of four statistics below. The layout is split between text on the left and an image on the right.

Tailwind Component #3

Tailwind CSS

NEUB

<section x-data="{ mobileNavOpen: false }" class="relative bg-yellow-300 pb-8 md:pb-16 lg:pb-24 overflow-hidden">
    <div class="relative container px-6 mx-auto">
        <nav class="relative flex justify-between items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-pink-500 hover:bg-yellow-300 transition-colors border-2 border-black">
                    <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black" href="#">CONTACT</a></li>
            </ul>
            <div class="hidden lg:block">
                <button class="px-8 py-4 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    GET STARTED
                </button>
            </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

Neo-Brutalist Hero Section with Bold Headline and Stats

A full-width hero section on a yellow background featuring a navigation bar, a large stacked headline with pink accent text, a short paragraph, two call-to-action buttons, and a framed photo of a desktop monitor displaying a design system. A stats row with pink figures sits below a horizontal divider.

Tailwind Component #4

Tailwind CSS

NEUB

<section x-data="{ mobileNavOpen: false }" class="relative bg-pink-500 pb-8 md:pb-16 lg:pb-24 overflow-hidden">
    <div class="relative container px-6 mx-auto">
        <nav class="relative flex justify-between items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-pink-500 hover:bg-yellow-300 transition-colors border-2 border-black">
                    <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white" href="#">CONTACT</a></li>
            </ul>
            <div class="hidden lg:block">
                <button class="px-8 py-4 bg-white hover:bg-yellow-300 text-black font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    GET STARTED
                </button>
            </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

Tailwind Component #5

Tailwind CSS

NEUB

<section class="relative bg-yellow-300 pb-8 md:pb-16 lg:pb-24 overflow-y-hidden" x-data="{ mobileNavOpen: false }">
    <div class="hidden sm:block absolute top-0 left-0 bottom-0 sm:w-3/12 lg:w-2/5 bg-pink-500 border-r-4 border-black">
    </div>
    <div class="relative container px-4 mx-auto">
        <nav class="relative flex items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <ul class="hidden lg:flex w-3/5 ml-auto pl-28 items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black" href="#">CONTACT</a></li>
            </ul>
            <div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center justify-center w-12 h-12 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    <svg class="w-6 h-6 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z">
                        </path>
                    </svg>
                </button>
            </div>
        </nav>

        <div class="w-full sm:w-9/12 lg:w-3/5 pl-6 lg:pl-16 ml-auto">

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

Tailwind CSS

NEUB

<section class="relative pb-8 md:pb-16 lg:pb-24 overflow-y-hidden" x-data="{ mobileNavOpen: false }">
    <div class="hidden sm:block absolute top-0 left-0 bottom-0 sm:w-3/12 lg:w-2/5 bg-pink-500 border-r-4 border-black">
    </div>
    <div class="relative container px-4 mx-auto">
        <nav class="relative flex items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <ul class="hidden lg:flex w-3/5 ml-auto pl-28 items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black" href="#">CONTACT</a></li>
            </ul>
            <div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center justify-center w-12 h-12 bg-yellow-300 hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    <svg class="w-6 h-6 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z">
                        </path>
                    </svg>
                </button>
            </div>
        </nav>

        <div class="w-full sm:w-9/12 lg:w-3/5 pl-6 lg:pl-16 ml-auto">

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

Tailwind CSS

NEUB

<section class="relative bg-pink-500 pb-8 md:pb-16 lg:pb-24 overflow-y-hidden" x-data="{ mobileNavOpen: false }">
    <div class="hidden sm:block absolute top-0 left-0 bottom-0 sm:w-3/12 lg:w-2/5 bg-yellow-300 border-r-4 border-white">
    </div>
    <div class="relative container px-4 mx-auto">
        <nav class="relative flex items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <ul class="hidden lg:flex w-3/5 ml-auto pl-28 items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white" href="#">CONTACT</a></li>
            </ul>
            <div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center justify-center w-12 h-12 bg-yellow-300 hover:bg-white text-black font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    <svg class="w-6 h-6 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z">
                        </path>
                    </svg>
                </button>
            </div>
        </nav>

        <div class="w-full sm:w-9/12 lg:w-3/5 pl-6 lg:pl-16 ml-auto">

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

Tailwind CSS

NEUB

<section class="relative bg-gray-900 pb-8 md:pb-16 lg:pb-24 overflow-y-hidden" x-data="{ mobileNavOpen: false }">
    <div class="hidden sm:block absolute top-0 left-0 bottom-0 sm:w-3/12 lg:w-2/5 bg-pink-500 border-r-4 border-white">
    </div>
    <div class="relative container px-4 mx-auto">
        <nav class="relative flex items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <ul class="hidden lg:flex w-3/5 ml-auto pl-28 items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white" href="#">CONTACT</a></li>
            </ul>
            <div>
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center justify-center w-12 h-12 bg-yellow-300 hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#ffffff] hover:shadow-[4px_4px_0px_0px_#ffffff]">
                    <svg class="w-6 h-6 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z">
                        </path>
                    </svg>
                </button>
            </div>
        </nav>

        <div class="w-full sm:w-9/12 lg:w-3/5 pl-6 lg:pl-16 ml-auto">

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

Tailwind CSS

NEUB

<section class="bg-yellow-300 pb-8 md:pb-16 lg:pb-24 " x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="relative flex items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden ml-auto">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-pink-500 hover:bg-yellow-300 transition-colors border-2 border-black">
                    <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="hidden lg:flex items-center space-x-0 ml-auto mr-16">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black" href="#">CONTACT</a></li>
            </ul>
            <div class="hidden lg:block">
                <button class="px-8 py-4 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    GET STARTED
                </button>
            </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

Tailwind Component #10

Tailwind CSS

NEUB

<section class="bg-white pb-8 md:pb-16 lg:pb-24 " x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="relative flex items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden ml-auto">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-pink-500 hover:bg-yellow-300 transition-colors border-2 border-black">
                    <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="hidden lg:flex items-center space-x-0 ml-auto mr-16">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black" href="#">CONTACT</a></li>
            </ul>
            <div class="hidden lg:block">
                <button class="px-8 py-4 bg-yellow-300 hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    GET STARTED
                </button>
            </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

Tailwind Component #11

Tailwind CSS

NEUB

<section class="bg-gray-900 pb-8 md:pb-16 lg:pb-24 " x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <nav class="relative flex items-center py-8 border-b-4 border-white">
      <a href="#">
        <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
      </a>
      <div class="lg:hidden ml-auto">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-pink-500 hover:bg-yellow-300 transition-colors border-2 border-black">
          <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex items-center space-x-0 ml-auto mr-16">
        <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">ABOUT</a></li>
        <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">WORK</a></li>
        <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">SERVICES</a></li>
        <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white" href="#">CONTACT</a></li>
      </ul>
      <div class="hidden lg:block">
        <button class="px-8 py-4 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#ffdf20] hover:shadow-[4px_4px_0px_0px_#ffdf20]">
          GET STARTED
        </button>
      </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

Tailwind Component #12

Tailwind CSS

NEUB

<section class="bg-pink-500 pb-8 md:pb-16 lg:pb-24 " x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="relative flex items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden ml-auto">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-pink-500 hover:bg-yellow-300 transition-colors border-2 border-black">
                    <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                    </svg>
                </button>
            </div>
            <ul class="hidden lg:flex items-center space-x-0 ml-auto mr-16">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white" href="#">CONTACT</a></li>
            </ul>
            <div class="hidden lg:block">
                <button class="px-8 py-4 bg-white hover:bg-yellow-300 text-black font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    GET STARTED
                </button>
            </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

Tailwind Component #13

Tailwind CSS

NEUB

<section class="bg-pink-500 pb-8 md:pb-16 lg:pb-24" x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="relative flex justify-between items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-black hover:bg-yellow-300 transition-colors border-4 border-black">
                    <svg class="w-6 h-6 mx-auto text-white" 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 absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 lg:flex ml-auto mr-auto items-center w-auto space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white" href="#">CONTACT</a></li>
            </ul>
            <ul class="hidden lg:flex items-center w-auto space-x-4">
                <li><a class="inline-block text-lg font-black font-heading text-white hover:text-yellow-300 transition-all" href="#">SIGN IN</a></li>
                <li><a class="inline-block px-8 py-4 bg-yellow-300 hover:bg-white text-black font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" href="#">SIGN UP</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

Tailwind Component #14

Tailwind CSS

NEUB

<section class="bg-gray-900 pb-8 md:pb-16 lg:pb-24" x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="relative flex justify-between items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-black hover:bg-yellow-300 transition-colors border-4 border-black">
                    <svg class="w-6 h-6 mx-auto text-white" 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 absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 lg:flex ml-auto mr-auto items-center w-auto space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 text-white transition-all border-2 border-white" href="#">CONTACT</a></li>
            </ul>
            <ul class="hidden lg:flex items-center w-auto space-x-4">
                <li><a class="inline-block text-lg font-black font-heading text-white hover:text-yellow-300 transition-all" href="#">SIGN IN</a></li>
                <li><a class="inline-block px-8 py-4 bg-yellow-300 hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#ffffff] hover:shadow-[4px_4px_0px_0px_#ffffff]" href="#">SIGN UP</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

Tailwind Component #15

Tailwind CSS

NEUB

<section class="bg-yellow-300 pb-8 md:pb-16 lg:pb-24" x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="relative flex justify-between items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-black hover:bg-yellow-300 transition-colors border-4 border-black">
                    <svg class="w-6 h-6 mx-auto text-white" 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 absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 lg:flex ml-auto mr-auto items-center w-auto space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black" href="#">CONTACT</a></li>
            </ul>
            <ul class="hidden lg:flex items-center w-auto space-x-4">
                <li><a class="inline-block text-lg font-black font-heading text-black hover:text-pink-500 transition-all" href="#">SIGN IN</a></li>
                <li><a class="inline-block px-8 py-4 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" href="#">SIGN UP</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

Tailwind Component #16

Tailwind CSS

NEUB

<section class="bg-white pb-8 md:pb-16 lg:pb-24" x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="relative flex justify-between items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-black hover:bg-yellow-300 transition-colors border-4 border-black">
                    <svg class="w-6 h-6 mx-auto text-white" 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 absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 lg:flex ml-auto mr-auto items-center w-auto space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-pink-500 hover:text-white transition-all border-2 border-black" href="#">CONTACT</a></li>
            </ul>
            <ul class="hidden lg:flex items-center w-auto space-x-4">
                <li><a class="inline-block text-lg font-black font-heading hover:text-pink-500 transition-all" href="#">SIGN IN</a></li>
                <li><a class="inline-block px-8 py-4 bg-yellow-300 hover:bg-pink-500 text-black hover:text-white font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" href="#">SIGN UP</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

Tailwind Component #17

Tailwind CSS

NEUB

<section class="relative pb-8 md:pb-16 lg:pb-24 bg-pink-500 overflow-x-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="flex justify-between items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-yellow-300 hover:bg-white transition-colors border-2 border-black">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </nav>
        <div class="flex flex-wrap items-center -mx-4 mt-16 lg:mt-24">
            <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
                <div class="">
                    <div class="mb-8 inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-sm tracking-wider uppercase">
                        PERFORMANCE TRACKING
                    </div>
                    <div class="max-w-xl lg:max-w-2xl mb-6">
                        <h2 class="mb-8 text-black text-5xl sm:text-6xl md:text-7xl text-white font-black font-heading leading-[0.9] tracking-tight">TAKE CARE OF YOUR <span class="text-yellow-300">PERFORMANCE</span> EVERY DAY.</h2>
                        <p class="max-w-xl lg:max-w-lg mb-12 text-white text-xl lg:text-2xl leading-relaxed font-medium">Build a well-presented brand that everyone will love. Take
                            care to develop resources continually and integrity them with previous projects.</p>
                    </div>
                    <div class="flex">

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

Tailwind CSS

NEUB

<section class="relative pb-8 md:pb-16 lg:pb-24 bg-yellow-300 overflow-x-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="flex justify-between items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-white hover:bg-pink-500 hover:text-white transition-colors border-2 border-black">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </nav>
        <div class="flex flex-wrap items-center -mx-4 mt-16 lg:mt-24">
            <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
                <div class="">
                    <div class="mb-8 inline-block px-4 py-2 bg-pink-500 text-white font-bold text-sm tracking-wider uppercase">
                        PERFORMANCE TRACKING
                    </div>
                    <div class="max-w-xl lg:max-w-2xl mb-6">
                        <h2 class="mb-8 text-black text-5xl sm:text-6xl md:text-7xl font-black font-heading leading-[0.9] tracking-tight">TAKE CARE OF YOUR <span class="text-pink-500">PERFORMANCE</span> EVERY DAY.</h2>
                        <p class="max-w-xl lg:max-w-lg mb-12 text-black text-xl lg:text-2xl leading-relaxed font-medium">Build a well-presented brand that everyone will love. Take
                            care to develop resources continually and integrity them with previous projects.</p>
                    </div>
                    <div class="flex">

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

Tailwind CSS

NEUB

<section class="relative pb-8 md:pb-16 lg:pb-24 bg-white overflow-x-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="flex justify-between items-center py-8 border-b-4 border-black">
            <a href="#">
                <img src="neub-assets/logos/neub-logo.png" alt="" class="h-7">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-pink-500 hover:bg-yellow-300 transition-colors border-2 border-black">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </nav>
        <div class="flex flex-wrap items-center -mx-4 mt-16 lg:mt-24">
            <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
                <div class="">
                    <div class="mb-8 inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">
                        PERFORMANCE TRACKING
                    </div>
                    <div class="max-w-xl lg:max-w-2xl mb-6">
                        <h2 class="mb-8 text-black text-5xl sm:text-6xl md:text-7xl font-black font-heading leading-[0.9] tracking-tight">TAKE CARE OF YOUR <span class="text-pink-500">PERFORMANCE</span> EVERY DAY.</h2>
                        <p class="max-w-xl lg:max-w-lg mb-12 text-gray-700 text-xl lg:text-2xl leading-relaxed font-medium">Build a well-presented brand that everyone will love. Take
                            care to develop resources continually and integrity them with previous projects.</p>
                    </div>
                    <div class="flex">

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

Tailwind CSS

NEUB

<section class="relative pb-8 md:pb-16 lg:pb-24 bg-gray-900 overflow-x-hidden" x-data="{ mobileNavOpen: false }">
    <div class="container px-4 mx-auto">
        <nav class="flex justify-between items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-yellow-300 hover:bg-white transition-colors border-2 border-white">
                <svg class="w-6 h-6 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </nav>
        <div class="flex flex-wrap items-center -mx-4 mt-16 lg:mt-24">
            <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
                <div class="">
                    <div class="mb-8 inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-sm tracking-wider uppercase">
                        PERFORMANCE TRACKING
                    </div>
                    <div class="max-w-xl lg:max-w-2xl mb-6">
                        <h2 class="mb-8 text-white text-5xl sm:text-6xl md:text-7xl font-black font-heading leading-[0.9] tracking-tight">TAKE CARE OF YOUR <span class="text-yellow-300">PERFORMANCE</span> EVERY DAY.</h2>
                        <p class="max-w-xl lg:max-w-lg mb-12 text-gray-300 text-xl lg:text-2xl leading-relaxed font-medium">Build a well-presented brand that everyone will love. Take
                            care to develop resources continually and integrity them with previous projects.</p>
                    </div>
                    <div class="flex">

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 Components by Shuffle

Browse 126 of ready-made components in Tailwind and Neub library. They are divided into UI libraries that our professional designers designed. Each of them has a resource of many variations of different types of components. Under each of them, there is a clear code created by our team of developers.

All elements available in the editor are fully responsive. You will get full access to them by subscribing to our drag and drop editor.

Try the demo for free!

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

Tailwind CSS Components – Neub Library

Framework

UI Library

Components

Tailwind Component #1

Get the code for 13,400+ components

Tailwind Component #2

Get the code for 13,400+ components

Neo-Brutalist Hero Section with Navigation and Stats

Tailwind Component #3

Get the code for 13,400+ components

Neo-Brutalist Hero Section with Bold Headline and Stats

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

Tailwind Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support