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

Tailwind CSS

NEUB

<section class="bg-pink-500 pb-8 md:pb-16 lg:pb-24 border-b-4 border-black" 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-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-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]">
          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

Hero section generator

Tailwind Component #22

Tailwind CSS

NEUB

<section class="bg-yellow-300 pb-8 md:pb-16 lg:pb-24 border-b-4 border-black" 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-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

Hero section generator

Tailwind Component #23

Tailwind CSS

NEUB

<section class="bg-white pb-8 md:pb-16 lg:pb-24 border-b-4 border-black" 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-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

Hero section generator

Tailwind Component #24

Tailwind CSS

NEUB

<section class="bg-gray-900 pb-8 md:pb-16 lg:pb-24 border-b-4 border-black" 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-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

dark-headers generator

Tailwind Component #25

Tailwind CSS

NEUB

<section class="relative pb-20 lg:py-20 overflow-hidden">
  <div class="lg:absolute lg:top-0 lg:left-0 lg:bottom-0 h-full w-full lg:w-5/12 mb-12 lg:mb-0">
    <div class="relative h-full pr-6 pb-6">
      <div class="absolute inset-0 bg-pink-500 border-4 border-black"></div>
      <img class="relative w-full h-full object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1690228254548-31ef53e40cd1?q=80&amp;w=871&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
      <div class="absolute bottom-0 right-0 w-24 h-24 bg-yellow-300 border-4 border-black"></div>
      <div class="absolute top-1 left-1 w-16 h-16 bg-black"></div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap">
      <div class="w-full lg:w-7/12 lg:ml-auto text-center">
        <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">Error 404</span>
        <h2 class="mt-8 mb-6 text-5xl leading-tight md:text-6xl lg:text-7xl font-black font-heading tracking-tight">PAGE NOT<br><span class="text-pink-500">FOUND</span></h2>
        <p class="mb-12 text-lg leading-relaxed lg:text-xl lg:leading-relaxed text-gray-700 font-medium max-w-md lg:max-w-xl mx-auto">Raw truth: We can't find what you're looking for. Time to make a bold move.</p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a class="inline-block px-6 py-4 bg-pink-500 hover:bg-yellow-300 text-white hover:text-black font-black font-heading text-xl border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[6px_6px_0px_0px_#000000]" href="#">RETURN HOME</a>
          <a class="inline-block px-6 py-4 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-xl border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[6px_6px_0px_0px_#000000]" href="#">TRY AGAIN</a>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Split-Screen 404 Error Page with Desk Photo and Bold CTA Buttons

A 404 error page with a split layout: a desk setup photograph with pink and yellow decorative blocks on the left, and a centered error message on the right with an ERROR 404 badge, bold heading, supporting text, and two call-to-action buttons (Return Home, Try Again). The buttons use hard offset shadows for a neo-brutalist style.

HTTP codes generator

Tailwind Component #26

Tailwind CSS

NEUB

<section class="py-20 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-2xl mx-auto text-center mb-12 lg:mb-16">
      <span class="inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-sm tracking-wider uppercase">MEET THE TEAM</span>
      <h2 class="mt-8 mb-8 text-5xl sm:text-6xl lg:text-7xl leading-tight font-black font-heading tracking-tighter text-white">BUILD WITH THE <span class="text-yellow-300">BEST</span> MINDS</h2>
      <p class="text-lg sm:text-xl lg:text-2xl leading-tight text-white font-medium max-w-xl md:max-w-2xl mx-auto">Raw talent meets uncompromising vision. Meet the team that builds interfaces that
        demand attention.</p>
    </div>
    <div class="max-w-md lg:max-w-3xl mx-auto xl:max-w-none">
      <div class="flex flex-wrap -m-4">
        <div class="w-full xl:w-1/2 p-4">
          <div class="bg-white p-8 border-4 border-black shadow-[8px_8px_0px_0px_#f6339a]">
            <div class="flex flex-wrap lg:flex-nowrap items-center -mx-4">
              <div class="w-full md:w-auto px-4 pl-10 lg:pl-4 mb-12 lg:mb-0">
                <div class="relative w-52 h-52">
                  <div class="absolute inset-0 translate-x-2 translate-y-2 bg-yellow-300 w-52 h-52 border-2 border-black">
                  </div>
                  <img class="absolute inset-0 -translate-x-2 -translate-y-2 w-52 h-52 object-cover border-2 border-black bg-black" src="https://images.unsplash.com/photo-1627161684458-a62da52b51c3?q=80&amp;w=849&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
              </div>
              <div class="w-full md:w-auto px-4">
                <div class="pl-6">
                  <h3 class="text-2xl font-black font-heading text-black mb-2 tracking-tight">Danny
                    Bailey</h3>

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

dark-team generator

Tailwind Component #27

Tailwind CSS

NEUB

<section class="py-20 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-3xl mx-auto text-center">
      <span class="inline-block px-4 py-2 bg-white text-black font-bold text-sm tracking-wider uppercase">New Feature</span>
      <h2 class="mt-8 mb-8 text-5xl sm:text-6xl lg:text-7xl text-yellow-300 font-black font-heading lg:leading-[0.9] mb-8 tracking-tight uppercase">Take <span class="text-pink-500">quick action</span>
        that increases your brand's regular profit.</h2>
      <p class="mb-12 text-xl lg:text-2xl leading-relaxed text-gray-300 mb-12 font-medium">If you have ever wondered how to develop your brand, this is the place for you.
        Take a big step forward in growing your business with this great tool.</p>
      <div class="flex flex-wrap items-center justify-center gap-4">
        <a href="#" class="inline-block px-6 py-4 bg-pink-500 hover:bg-yellow-300 text-white hover:text-black font-black font-heading text-xl border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[6px_6px_0px_0px_#000000]">
          TRY DEMO
        </a>
        <a href="#" class="inline-block px-6 py-4 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-xl border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[6px_6px_0px_0px_#000000]">
          SHARE WITH FRIENDS
        </a>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

dark-cta generator

Tailwind Component #28

Tailwind CSS

NEUB

<section x-data="{ mobileNavOpen: false }" class="bg-yellow-300 relative pb-5 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-white hover:bg-pink-500 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

Yellow Neubrutalist Navigation Bar with Logo and CTA

A horizontal top navigation bar on a solid yellow background with a bold NEUB wordmark on the left, four bordered menu items (About, Work, Services, Contact) centered, and a white outlined Get Started button with a hard black offset shadow on the right. A thick black rule runs along the bottom edge.

Navigation (horizontal) generator

Tailwind Component #29

Tailwind CSS

NEUB

<section class="py-20 bg-yellow-300" x-data="{ tab: 'general' }">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-2xl mx-auto text-center mb-12 lg:mb-16">
      <span class="inline-block px-4 py-2 bg-pink-500 text-white font-bold text-sm tracking-wider uppercase">FREQUENTLY ASKED QUESTIONS</span>
      <h2 class="mt-8 mb-6 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl text-black font-black font-heading leading-[0.9] tracking-tight uppercase">GET YOUR<br><span class="text-pink-500">ANSWERS</span> HERE</h2>
      <p class="text-lg sm:text-xl lg:text-2xl leading-tight text-black font-medium max-w-md lg:max-w-xl mx-auto">Raw, uncompromising answers to your questions. No fluff, just the facts you need
        to move forward.</p>
    </div>

    <div class="max-w-2xl mx-auto">
      <ul class="relative flex flex-wrap mb-12 shadow-[8px_8px_0px_0px_#000000]">
        <div class="absolute inset-0 bg-black translate-y-2 translate-x-2"></div>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='general'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==1, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=1 }" href="#">GENERAL</a></li>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='payments'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==2, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=2 }" href="#">PAYMENTS</a></li>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='returns'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==3, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=3 }" href="#">RETURNS</a></li>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='refunds'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==4, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=4 }" href="#">REFUNDS</a></li>
      </ul>
      <ul class="border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
        <li class="bg-white border-b-4 border-black last:border-b-0" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left font-black font-heading p-6 hover:bg-pink-500 hover:text-white transition-all" x-on:click="accordion = !accordion">
            <span class="text-xl font-black font-heading tracking-tight">FUSCE EGET NUNC ET LIBERO
              ACCUMSAN RUTRUM QUIS NEC LECTUS?</span>
            <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transition-transform">
              <svg class="flex-shrink-0 w-8 h-8 ml-4 stroke-[3]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">

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

yellow-faq generator

Tailwind Component #30

Tailwind CSS

NEUB

<section class="py-8 md:py-12 lg:py-20 bg-pink-500">
    <div class="container px-4 mx-auto">
        <div class="max-w-lg lg:max-w-2xl mx-auto mb-12 md:mb-16 lg:mb-20 text-center">
            <span class="inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-sm tracking-wider uppercase">OUR BLOG</span>
            <h2 class="mt-8 mb-6 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl text-white font-black font-heading leading-[0.9] tracking-tight uppercase">READ OUR<br><span class="text-yellow-300">LATEST</span> POSTS</h2>
            <p class="text-xl lg:text-2xl leading-relaxed text-white font-medium">Raw
                insights and uncompromising takes on design, development, and digital innovation.</p>
        </div>

        <div class="flex flex-wrap -mx-4 -mb-4">
            <div class="w-full lg:w-2/3 px-4 mb-12">
                <div class="relative mr-4 mb-12">
                    <div class="absolute inset-0 bg-yellow-300 translate-x-4 translate-y-4 border-4 border-black"></div>
                    <div class="relative bg-white border-4 border-black h-96 overflow-hidden">
                        <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1690228254548-31ef53e40cd1?q=80&amp;w=871&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    </div>
                </div>
                <span class="inline-block px-3 py-1 bg-yellow-300 text-black font-bold text-xs tracking-wider uppercase">10 JUN 2022 19:40</span>
                <h2 class="mt-4 mb-4 text-3xl lg:text-4xl font-black font-heading text-white tracking-tight">LOREM IPSUM DOLOR SIT AMET</h2>
                <p class="max-w-2xl mb-6 text-lg text-white leading-relaxed font-medium">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae
                    aliquet nec, accumsan aliquet orci.</p>
                <a class="inline-flex items-center px-6 py-4 bg-white hover:bg-yellow-300 text-black font-black font-heading text-xl border-4 border-black transition-all transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[6px_6px_0px_0px_#000000]" href="#">
                    <span>READ MORE</span>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Blog Post Card Grid with Yellow Offset Shadows on Pink Background

A blog section with a pink background, a yellow eyebrow label, and a large two-line heading, followed by a grid of post cards containing workspace photos, yellow date tags, bold titles, short excerpts, and black-bordered READ MORE buttons. The layout uses one wide featured card alongside a narrower card, then three equal cards in a second row.

Blog generator

Tailwind Component #31

Tailwind CSS

NEUB

<section class="py-20 bg-pink-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-2xl mx-auto text-center mb-12 lg:mb-16">
      <span class="inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-sm tracking-wider uppercase">MEET THE TEAM</span>
      <h2 class="mt-8 mb-8 text-5xl sm:text-6xl lg:text-7xl leading-tight font-black font-heading tracking-tighter text-white">BUILD WITH THE <span class="text-yellow-300">BEST</span> MINDS</h2>
      <p class="text-lg sm:text-xl lg:text-2xl leading-tight text-white font-medium max-w-xl md:max-w-2xl mx-auto">Raw talent meets uncompromising vision. Meet the team that builds interfaces that
        demand attention.</p>
    </div>
    <div class="max-w-md lg:max-w-3xl mx-auto xl:max-w-none">
      <div class="flex flex-wrap -m-4">
        <div class="w-full xl:w-1/2 p-4">
          <div class="bg-white p-8 border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
            <div class="flex flex-wrap lg:flex-nowrap items-center -mx-4">
              <div class="w-full md:w-auto px-4 pl-10 lg:pl-4 mb-12 lg:mb-0">
                <div class="relative w-52 h-52">
                  <div class="absolute inset-0 translate-x-2 translate-y-2 bg-yellow-300 w-52 h-52 border-2 border-black">
                  </div>
                  <img class="absolute inset-0 -translate-x-2 -translate-y-2 w-52 h-52 object-cover border-2 border-black bg-black" src="https://images.unsplash.com/photo-1627161684458-a62da52b51c3?q=80&amp;w=849&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                </div>
              </div>
              <div class="w-full md:w-auto px-4">
                <div class="pl-6">
                  <h3 class="text-2xl font-black font-heading text-black mb-2 tracking-tight">Danny
                    Bailey</h3>

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

Team Member Card Grid with Bold Pink Header

A team section on a solid pink background with a yellow eyebrow label, large bold heading, and intro text above a two-by-two grid of white bordered cards. Each card pairs a headshot with a yellow offset block, a name, a pink role label, and a short bio.

Team generator

Tailwind Component #32

Tailwind CSS

NEUB

<section class="py-20">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/2 p-4">
                <div class="relative">
                    <div class="absolute inset-0 bg-pink-500 translate-x-4 translate-y-4 border-4 border-black"></div>
                    <img class="relative w-full h-80 object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1713947506242-8fcae733d158?q=80&amp;w=1332&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-2 -right-2 w-16 h-16 bg-yellow-300 border-4 border-black"></div>
                </div>
            </div>
            <div class="w-full lg:w-1/2 p-4">
                <div class="relative">
                    <div class="absolute inset-0 bg-yellow-300 translate-x-4 translate-y-4 border-4 border-black"></div>
                    <img class="relative w-full h-80 object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1691580438246-a6e5cb35ca05?q=80&amp;w=764&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-2 -right-2 w-16 h-16 bg-pink-500 border-4 border-black"></div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="relative">
                    <div class="absolute inset-0 bg-pink-500 translate-x-3 translate-y-3 border-4 border-black"></div>
                    <img class="relative w-full h-80 object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1690228254548-31ef53e40cd1?q=80&amp;w=871&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-1 -right-1 w-12 h-12 bg-yellow-300 border-4 border-black"></div>
                </div>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Five-Image Photo Collage with Pink and Yellow Offset Frames

A grid of five stock-style photographs of home offices and a woman using a phone and card, each framed with bold black borders and offset pink or yellow shadow blocks. It functions as a decorative image gallery or feature showcase with no visible text, navigation, or controls.

Portfolio generator

Tailwind Component #33

Tailwind CSS

NEUB

<section class="py-20 bg-yellow-300">
  <div class="container px-4 mx-auto mb-16">
    <div class="max-w-xl lg:max-w-4xl mx-auto">
      <div class="flex mb-6 items-center justify-center">
        <a class="text-sm font-black font-heading text-black hover:text-pink-500" href="#">HOME</a>
        <svg class="w-3 h-3 mx-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
        </svg>
        <a class="text-sm font-black font-heading text-black hover:text-pink-500" href="#">BLOG</a>
        <svg class="w-3 h-3 mx-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
        </svg>
        <a class="text-sm font-black font-heading text-pink-500" href="#">ARTICLE</a>
      </div>
      <h2 class="mb-8 text-center text-5xl sm:text-6xl lg:text-7xl leading-tight font-black font-heading tracking-tight text-black">LOREM IPSUM DOLOR SIT AMET <span class="text-pink-500">CONSECTUTAR</span> DOMOR AT ELIS</h2>
      <div class="flex items-center justify-center">
        <div class="mr-6 w-16 h-16 relative">
          <div class="absolute inset-0 bg-black translate-x-1 translate-y-1"></div>
          <img class="relative w-full h-full object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&amp;w=1470&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
        </div>
        <div>
          <h3 class="text-2xl font-black font-heading tracking-tight text-black">DIANE BAILEY</h3>
          <p class="text-lg font-bold text-black">FEBRUARY 26, 2021</p>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Blog Article Header with Hero Image and Quote Blocks

A yellow-background blog article layout showing breadcrumbs, a bold multi-line headline with a pink accent word, author byline with avatar and date, a framed hero photo with pink offset border, and stacked text callout blocks in pink, dark, and light styles. Content is arranged in a centered vertical stack with neo-brutalist hard black shadows and borders.

Content generator

Tailwind Component #34

Tailwind CSS

NEUB

<section class="py-20">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full lg:w-5/12 px-4 order-last lg:order-first">
                <div class="relative max-w-xl lg:max-w-none ml-5">
                    <div class="absolute inset-0 bg-pink-500 translate-x-6 translate-y-6 border-4 border-black"></div>
                    <img class="relative w-full h-auto border-4 border-black bg-black object-cover" src="https://images.unsplash.com/photo-1691580438246-a6e5cb35ca05?q=80&amp;w=764&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-4 -right-4 w-24 h-24 bg-yellow-300 border-4 border-black"></div>
                    <div class="absolute -top-4 -left-4 w-16 h-16 bg-pink-500 border-4 border-black"></div>
                </div>
            </div>
            <div class="w-full lg:w-7/12 px-4 mb-16 lg:mb-0">
                <div class="max-w-xl lg:max-w-md xl:max-w-xl lg:mx-auto">
                    <div class="mb-8 inline-flex items-center px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">
                        <img class="inline-block w-4 h-4 mr-2" src="neub-assets/images/quote.svg" alt="">
                        <span>TESTIMONIAL</span>
                    </div>
                    <h2 class="mb-5 text-3xl sm:text-4xl md:text-5xl font-black font-heading tracking-tight text-black uppercase">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
                    <p class="mb-5 lg:mb-10 max-w-lg text-base leading-relaxed lg:text-xl text-gray-700 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                    <div class="border-t-4 border-white">
                        <p class="text-2xl font-black font-heading text-black tracking-tight">Danny
                            Bailey</p>
                        <p class="text-lg text-gray-400 font-bold">CEO &amp; Founder</p>

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

Testimonial Section with Office Desk Photo and Pink Offset Frame

A split-screen testimonial section with a framed photo of a desk setup on the left and a black "Testimonial" label, large uppercase heading, short body paragraph, and attributed name and title on the right. Decorative pink and yellow offset blocks with black outlines frame the image.

Testimonials generator

Tailwind Component #35

Tailwind CSS

NEUB

<section class="py-20" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
    <div class="container px-4 mx-auto">
        <div class="max-w-xl lg:max-w-2xl mx-auto mb-12 text-center">
            <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">PRICING PLANS</span>
            <h2 class="mt-8 mb-6 text-5xl sm:text-6xl lg:text-7xl leading-tight font-black font-heading tracking-tight text-black">CHOOSE YOUR<br><span class="text-pink-500">POWER</span> LEVEL</h2>
            <p class="mb-12 text-lg sm:text-xl lg:text-2xl leading-tight text-gray-700 font-medium max-w-md lg:max-w-xl mx-auto">Raw, uncompromising pricing that scales with your ambition. No hidden
                fees, no compromises.</p>
            <div class="flex justify-center gap-0">
                <a x-ref="pricing1" x-on:click.prevent="pricing = $refs.pricing1.textContent" class="px-6 py-4 text-lg font-black font-heading border-4 border-black border-r-0 hover:bg-pink-500 hover:text-black transition-all" :class="{ 'bg-pink-500 text-black': pricing == $refs.pricing1.textContent, 'bg-black text-white': pricing != $refs.pricing1.textContent }" href="#">MONTHLY</a>
                <a x-ref="pricing2" x-on:click.prevent="pricing = $refs.pricing2.textContent" class="px-6 py-4 text-lg font-black font-heading border-4 border-black hover:bg-pink-500 hover:text-black transition-all" :class="{ 'bg-pink-500 text-black': pricing == $refs.pricing2.textContent, 'bg-black text-white': pricing != $refs.pricing2.textContent }" href="#">YEARLY</a>
            </div>
        </div>
        <div class="flex flex-wrap items-stretch -mx-4 -mb-6 lg:mb-0">
            <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
                <div class="flex flex-col h-full max-w-lg mx-auto lg:max-w-none p-8 md:py-12 xl:px-12 bg-gray-900 border-4 border-black shadow-[8px_8px_0px_0px_#f6339a]">
                    <div class="text-center mb-8">
                        <h3 class="text-2xl font-black font-heading text-pink-500 mb-4 tracking-wider">
                            STARTER</h3>
                        <span class="inline-block text-5xl md:text-6xl font-black font-heading text-white tracking-tighter">$34,99</span>
                    </div>
                    <ul class="mb-8 space-y-4">
                        <li class="flex items-center">
                            <div class="mr-4 w-6 h-6 bg-pink-500 flex items-center justify-center">
                                <svg class="w-6 h-6 text-black font-bold" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="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

Bold Three-Tier Pricing Section with Monthly/Yearly Toggle

A marketing pricing section with a headline, monthly/yearly billing switch, and three plan cards (Starter, Pro, Premium) listing features and call-to-action buttons. The middle Pro card is highlighted in pink with a yellow Popular badge.

Pricing generator

Tailwind Component #36

Tailwind CSS

NEUB

<footer class="py-20 bg-white">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4 mb-8 lg:mb-16">
            <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
                <a href="#">
                    <img src="neub-assets/logos/neub-logo.png" alt="" class="h-5">
                </a>
                <p class="mt-5 mb-6 max-w-xs text-gray-400 leading-loose font-medium">Bold
                    design system for tech startups that demand attention and push boundaries.</p>
                <div>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/facebook.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/github.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/instagram.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/linkedin.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/twitter.svg">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

NEUB Site Footer with Link Columns and Social Icons

A light-background website footer showing the NEUB brand, a short tagline, five outlined social media icon buttons, four link columns (Company, Pages, Legal, Resources) with colored underline accents, and a pink copyright line centered at the bottom.

Footers generator

Tailwind Component #37

Tailwind CSS

NEUB

<section class="py-20 bg-gray-900">
  <div class="container px-4 mx-auto mb-16">
    <div class="max-w-xl lg:max-w-4xl mx-auto">
      <div class="flex mb-6 items-center justify-center">
        <a class="text-sm font-black font-heading text-white hover:text-yellow-300" href="#">HOME</a>
        <svg class="w-3 h-3 mx-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
        </svg>
        <a class="text-sm font-black font-heading text-white hover:text-yellow-300" href="#">BLOG</a>
        <svg class="w-3 h-3 mx-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
        </svg>
        <a class="text-sm font-black font-heading text-pink-500" href="#">ARTICLE</a>
      </div>
      <h2 class="mb-8 text-center text-5xl sm:text-6xl lg:text-7xl leading-tight font-black font-heading tracking-tight text-white">LOREM IPSUM DOLOR SIT AMET <span class="text-yellow-300">CONSECTUTAR</span> DOMOR AT ELIS</h2>
      <div class="flex items-center justify-center">
        <div class="mr-6 w-16 h-16 relative">
          <div class="absolute inset-0 bg-pink-500 translate-x-1 translate-y-1"></div>
          <img class="relative w-full h-full object-cover border-4 border-pink-500 bg-white" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&amp;w=1470&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
        </div>
        <div>
          <h3 class="text-2xl font-black font-heading tracking-tight text-white">DIANE BAILEY</h3>
          <p class="text-lg font-bold text-gray-300">FEBRUARY 26, 2021</p>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

dark-content generator

Tailwind Component #38

Tailwind CSS

NEUB

<section class="py-20 bg-gray-900">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full lg:w-2/5 px-4 mt-12 lg:mt-0 order-last lg:order-first">
                <div class="relative">
                    <div class="absolute inset-0 bg-pink-500 translate-x-6 translate-y-6 border-2 border-black"></div>
                    <img class="relative w-full h-full max-h-96 lg:max-h-full object-cover border-2 border-black bg-black" src="https://images.unsplash.com/photo-1691580438246-a6e5cb35ca05?q=80&amp;w=764&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-4 -right-4 w-24 h-24 bg-yellow-300 border-2 border-black"></div>
                    <div class="absolute -top-4 -left-4 w-16 h-16 bg-yellow-300 border-2 border-black"></div>
                </div>
            </div>
            <div class="w-full lg:w-3/5 px-4">
                <div class="lg:max-w-lg xl:max-w-2xl lg:ml-auto">
                    <h2 class="mb-12 max-w-xl text-3xl leading-tight sm:text-4xl md:text-5xl font-black font-heading tracking-tight text-yellow-300">Lorem ipsum dolor sit amet consectetur</h2>
                    <div class="flex flex-wrap -mx-4 -mb-10 lg:-mb-12">
                        <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                            <span class="mb-4 flex items-center justify-center w-12 h-12 bg-pink-500 border-2 border-black text-white font-black font-heading text-xl leading-loose shadow-[6px_6px_0px_0px_#000000]">1</span>
                            <p class="max-w-sm text-lg text-gray-300 leading-loose font-medium">Etiam pellentesque non nibh non pulvinar. Mauris posuere,
                                tellus sit amet tempus vestibulum.</p>
                        </div>
                        <div class="w-full md:w-1/2 px-4 mb-10 lg:mb-12">
                            <span class="mb-4 flex items-center justify-center w-12 h-12 bg-pink-500 border-2 border-black text-white font-black font-heading text-xl leading-loose shadow-[6px_6px_0px_0px_#000000]">2</span>
                            <p class="max-w-sm text-lg text-gray-300 leading-loose font-medium">Etiam pellentesque non nibh non pulvinar. Mauris posuere,
                                tellus sit amet tempus vestibulum.</p>

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

dark-how-it-works generator

Tailwind Component #39

Tailwind CSS

NEUB

<footer class="py-20 bg-gray-900">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4 mb-8 lg:mb-16">
            <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
                <a href="#">
                    <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-5">
                </a>
                <p class="mt-5 mb-6 max-w-xs text-gray-400 leading-loose font-medium">Bold
                    design system for tech startups that demand attention and push boundaries.</p>
                <div>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-white hover:border-yellow-300 transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#f6339a] hover:shadow-[2px_2px_0px_0px_#f6339a]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/facebook.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-white hover:border-yellow-300 transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#f6339a] hover:shadow-[2px_2px_0px_0px_#f6339a]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/github.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-white hover:border-yellow-300 transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#f6339a] hover:shadow-[2px_2px_0px_0px_#f6339a]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/instagram.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-white hover:border-yellow-300 transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#f6339a] hover:shadow-[2px_2px_0px_0px_#f6339a]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/linkedin.svg">
                    </a>
                    <a class="inline-flex items-center justify-center w-12 h-12 mr-4 mb-4 bg-white hover:bg-yellow-300 border-4 border-white hover:border-yellow-300 transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#f6339a] hover:shadow-[2px_2px_0px_0px_#f6339a]" href="#">
                        <img class="w-6 h-6" src="neub-assets/socials/twitter.svg">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

dark-footers generator

Tailwind Component #40

Tailwind CSS

NEUB

<div class="fixed bottom-0 inset-x-0 pt-5 px-5 pb-10 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container px-4 mx-auto mt-8">
    <div class="p-8 bg-black border-4 border-black shadow-[8px_8px_0px_0px_#f6339a]">
      <h3 class="mb-2 text-2xl font-black font-heading text-pink-500 tracking-tight">COOKIE POLICY</h3>
      <p class="mb-8 text-white leading-relaxed font-medium text-lg">We use cookies to
        personalise content, to provide social media features and to analyse our traffic. We also share information
        about your use of our site with our social media, advertising and analytics partners. If you want to change your
        cookie setting, please see the 'how to reject cookies' section of our . Otherwise, if you agree to our use of
        cookies, please continue to use our website.</p>
      <div class="w-full flex flex-col sm:flex-row gap-4">
        <a x-on:click.prevent="open=false" class="inline-block px-6 py-4 bg-pink-500 hover:bg-yellow-300 text-center text-white hover:text-black font-black font-heading text-base border-4 border-white transition-all hover:translate-x-2 hover:translate-y-2 shadow-[6px_6px_0px_0px_#ffffff] hover:shadow-[3px_3px_0px_0px_#ffffff]" href="#">ALLOW</a>
        <a x-on:click.prevent="open=false" class="inline-block px-6 py-4 bg-black hover:bg-pink-500 text-center text-white font-black font-heading text-base border-4 border-white transition-all hover:translate-x-2 hover:translate-y-2 shadow-[6px_6px_0px_0px_#ffffff] hover:shadow-[3px_3px_0px_0px_#ffffff]" href="#">DECLINE</a>
      </div>
    </div>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Cookie Policy Consent Banner with Allow and Decline Buttons

A full-width dark notification banner displaying a cookie policy heading, explanatory paragraph, and two action buttons labeled Allow and Decline. The layout is a single stacked column with a pink offset shadow and high-contrast bordered buttons.

default-cookies generator

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

UI Components – Neub Library

Framework

UI Library

Components

Tailwind Component #21

Get the code for 13,400+ components

Tailwind Component #22

Get the code for 13,400+ components

Tailwind Component #23

Get the code for 13,400+ components

Tailwind Component #24

Get the code for 13,400+ components

Tailwind Component #25

Get the code for 13,400+ components

Split-Screen 404 Error Page with Desk Photo and Bold CTA Buttons

Tailwind Component #26

Get the code for 13,400+ components

Tailwind Component #27

Get the code for 13,400+ components

Tailwind Component #28

Get the code for 13,400+ components

Yellow Neubrutalist Navigation Bar with Logo and CTA

Tailwind Component #29

Get the code for 13,400+ components

Tailwind Component #30

Get the code for 13,400+ components

Blog Post Card Grid with Yellow Offset Shadows on Pink Background

Tailwind Component #31

Get the code for 13,400+ components

Team Member Card Grid with Bold Pink Header

Tailwind Component #32

Get the code for 13,400+ components

Five-Image Photo Collage with Pink and Yellow Offset Frames

Tailwind Component #33

Get the code for 13,400+ components

Blog Article Header with Hero Image and Quote Blocks

Tailwind Component #34

Get the code for 13,400+ components

Testimonial Section with Office Desk Photo and Pink Offset Frame

Tailwind Component #35

Get the code for 13,400+ components

Bold Three-Tier Pricing Section with Monthly/Yearly Toggle

Tailwind Component #36

Get the code for 13,400+ components

NEUB Site Footer with Link Columns and Social Icons

Tailwind Component #37

Get the code for 13,400+ components

Tailwind Component #38

Get the code for 13,400+ components

Tailwind Component #39

Get the code for 13,400+ components

Tailwind Component #40

Get the code for 13,400+ components

Cookie Policy Consent Banner with Allow and Decline Buttons

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