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

Tailwind CSS

NEUB

<section class="relative py-20 bg-pink-500">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4">
            <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
                <div class="max-w-md md:max-w-none xl:max-w-xl">
                    <div class="max-w-md md:max-w-lg lg:max-w-xl">
                        <div class="mb-8 inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-sm tracking-wider uppercase">
                            CONTACT INFO
                        </div>
                        <h2 class="mb-6 text-4xl text-5xl sm:text-6xl md:text-7xl text-white font-black font-heading leading-[0.9] tracking-tight uppercase">GET <span class="text-yellow-300">QUESTIONS?</span></h2>
                        <p class="text-xl lg:text-2xl leading-relaxed text-white font-medium">Raw, uncompromising communication. Reach out and let's make
                            something bold together. No corporate fluff, just direct contact.</p>
                    </div>
                    <div class="mt-12 w-full flex flex-wrap -mx-4 -mb-8">
                        <div class="w-full md:w-1/2 lg:w-full xl:w-1/2 px-4 mb-8">
                            <div class="h-full p-6 bg-white border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
                                <div class="mb-4 w-12 h-12 bg-yellow-300 flex items-center justify-center">
                                    <svg class="text-black" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M25.6 22.9C25.7 23 25.8 23 26 23H33C33.6 23 34 22.6 34 22C34 21.8 34 21.7 33.9 21.6L30.4 14.6C30.1 14.1 29.5 13.9 29 14.2C28.9 14.3 28.7 14.4 28.6 14.6L25.1 21.6C24.9 22 25.1 22.6 25.6 22.9ZM29.5 17.2L31.4 21H27.6L29.5 17.2ZM18.5 14C16 14 14 16 14 18.5C14 21 16 23 18.5 23C21 23 23 21 23 18.5C23 16 21 14 18.5 14ZM18.5 21C17.1 21 16 19.9 16 18.5C16 17.1 17.1 16 18.5 16C19.9 16 21 17.1 21 18.5C21 19.9 19.9 21 18.5 21ZM22.7 25.3C22.3 24.9 21.7 24.9 21.3 25.3L18.5 28.1L15.7 25.3C15.3 24.9 14.7 24.9 14.3 25.3C13.9 25.7 13.9 26.3 14.3 26.7L17.1 29.5L14.3 32.3C13.9 32.7 13.9 33.3 14.3 33.7C14.7 34.1 15.3 34.1 15.7 33.7L18.5 30.9L21.3 33.7C21.7 34.1 22.3 34.1 22.7 33.7C23.1 33.3 23.1 32.7 22.7 32.3L19.9 29.5L22.7 26.7C23.1 26.3 23.1 25.7 22.7 25.3ZM33 25H26C25.4 25 25 25.4 25 26V33C25 33.6 25.4 34 26 34H33C33.6 34 34 33.6 34 33V26C34 25.4 33.6 25 33 25ZM32 32H27V27H32V32Z" fill="currentColor"></path>
                                    </svg>
                                </div>
                                <h3 class="mb-4 text-xl font-black font-heading text-pink-500 tracking-wider">VISIT US</h3>
                                <p class="mb-2 text-base text-black font-bold leading-tight">1686, GERALDINE LANE</p>
                                <p class="text-base text-black font-bold leading-tight">

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

pink-contact generator

Tailwind Component #102

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 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-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="hidden lg:flex items-center space-x-0 ml-16 mr-auto">
                <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

Navigation (horizontal) generator

Tailwind Component #103

Tailwind CSS

NEUB

<section class="relative py-20 bg-yellow-300">
  <div class="absolute lg:top-0 right-0 bottom-0 h-96 lg:h-auto w-full lg:w-4/12 bg-pink-500 border-t-4 lg:border-t-0 lg:border-l-4 border-black">
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg">
          <div class="mb-8 inline-block px-4 py-2 bg-pink-500 text-white font-bold text-sm tracking-wider uppercase">
            SIGN IN
          </div>
          <h2 class="mb-6 text-4xl sm:text-5xl md:text-6xl font-black font-heading leading-tight tracking-tight text-black">JOIN OUR<br><span class="text-pink-500">BRUTAL</span><br>COMMUNITY</h2>
          <p class="text-lg lg:text-xl leading-relaxed text-black font-medium">Raw,
            uncompromising access to the most powerful design community. No fluff, just pure creative force.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="lg:max-w-lg xl:p-5">
          <form action="#" class="bg-white border-4 border-black p-8 md:p-12 shadow-[8px_8px_0px_0px_#000000]">
            <span class="inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-xs tracking-wider uppercase">ACCOUNT ACCESS</span>
            <h3 class="mt-5 mb-8 text-3xl font-black font-heading tracking-tight uppercase">Get started
            </h3>
            <input class="w-full py-4 px-4 mb-6 border-4 border-black font-bold text-lg placeholder-gray-600 focus:outline-none focus:border-pink-500 transition-colors" type="email" placeholder="E-mail address">
            <input class="w-full py-4 px-4 mb-6 border-4 border-black font-bold text-lg placeholder-gray-600 focus:outline-none focus:border-pink-500 transition-colors" type="password" placeholder="Password">
            <button class="block mb-8 w-full px-6 py-4 bg-yellow-300 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]">SIGN IN</button>

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

Tailwind CSS

NEUB

<section class="py-20 bg-pink-500">
    <div class="container px-4 mx-auto">
        <div class="mb-16 text-center">
            <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">FREQUENTLY ASKED</span>
            <h2 class="mt-8 mb-6 text-5xl sm:text-6xl md:text-7xl text-white font-black font-heading leading-[0.9] tracking-tight uppercase">QUESTIONS &amp;<br><span class="text-yellow-300">ANSWERS</span></h2>
        </div>
        <div class="max-w-md mx-auto md:max-w-none">
            <div class="flex flex-wrap -mx-4 -mb-8">
                <div class="w-full md:w-1/2 lg:w-1/3 mb-8 px-4">
                    <div class="h-full p-8 bg-white border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
                        <span class="mr-6 mb-6 flex items-center justify-center w-16 h-16 p-3 bg-pink-500">
                            <svg class="text-black" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        <h3 class="mb-4 text-xl lg:text-2xl font-black font-heading text-black tracking-tight">WHAT IS NEUB DESIGN?</h3>
                        <ul class="list-none leading-loose text-gray-600 space-y-2">
                            <li><a class="text-gray-800 hover:text-pink-500 underline font-medium transition-colors" href="">Bold component library system</a></li>
                            <li><a class="text-gray-800 hover:text-pink-500 underline font-medium transition-colors" href="">Neo-brutalist design principles</a></li>
                            <li><a class="text-gray-800 hover:text-pink-500 underline font-medium transition-colors" href="">Raw uncompromising interfaces</a></li>
                            <li><a class="text-gray-800 hover:text-pink-500 underline font-medium transition-colors" href="">Maximum visual impact</a></li>
                        </ul>
                    </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

pink-faq generator

Tailwind Component #105

Tailwind CSS

NEUB

<section class="relative py-20">
  <div class="absolute lg:top-0 right-0 bottom-0 h-96 lg:h-auto w-full lg:w-4/12 bg-pink-500 border-t-4 lg:border-t-0 lg:border-l-4 border-black">
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
        <div class="max-w-lg">
          <div class="mb-8 inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">
            SIGN IN
          </div>
          <h2 class="mb-6 text-4xl sm:text-5xl md:text-6xl font-black font-heading leading-tight tracking-tight text-black">JOIN OUR<br><span class="text-pink-500">BRUTAL</span><br>COMMUNITY</h2>
          <p class="text-lg lg:text-xl leading-relaxed text-gray-700 font-medium">Raw,
            uncompromising access to the most powerful design community. No fluff, just pure creative force.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="lg:max-w-lg xl:p-5">
          <form action="#" class="bg-white border-4 border-black p-8 md:p-12 shadow-[8px_8px_0px_0px_#000000]">
            <span class="inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-xs tracking-wider uppercase">ACCOUNT ACCESS</span>
            <h3 class="mt-5 mb-8 text-3xl font-black font-heading tracking-tight uppercase">Get started
            </h3>
            <input class="w-full py-4 px-4 mb-6 border-4 border-black font-bold text-lg placeholder-gray-600 focus:outline-none focus:border-pink-500 transition-colors" type="email" placeholder="E-mail address">
            <input class="w-full py-4 px-4 mb-6 border-4 border-black font-bold text-lg placeholder-gray-600 focus:outline-none focus:border-pink-500 transition-colors" type="password" placeholder="Password">
            <button class="block mb-8 w-full px-6 py-4 bg-yellow-300 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]">SIGN IN</button>

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

Tailwind CSS

NEUB

<section class="py-20 bg-yellow-300">
    <div class="container px-4 mx-auto">
        <div class="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
            <span class="inline-block px-4 py-2 bg-pink-500 text-white font-bold text-sm tracking-wider uppercase">LOREM IPSUM</span>
            <h2 class="mt-8 mb-8 text-5xl sm:text-6xl lg:text-7xl font-black font-heading tracking-tight text-black">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
            <p class="text-lg sm:text-xl lg:text-2xl leading-tight text-black font-medium max-w-xl md:max-w-2xl mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <div class="relative bg-white border-4 border-black py-12 px-6 shadow-[8px_8px_0px_0px_#000000]">
                    <div class="text-center">
                        <div class="relative inline-block mb-6">
                            <img class="w-20 h-20 mx-auto border-4 border-black object-cover" 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 class="absolute -bottom-2 -right-2 w-6 h-6 bg-pink-500 border-2 border-black"></div>
                        </div>
                        <h3 class="mb-2 text-2xl font-black font-heading tracking-tighter">Danny Bailey
                        </h3>
                        <p class="text-lg text-black font-bold">CEO &amp; Founder</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <div class="relative bg-pink-500 border-4 border-black py-12 px-6 shadow-[8px_8px_0px_0px_#000000]">

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 generator

Tailwind Component #107

Tailwind CSS

NEUB

<section class="relative overflow-x-hidden py-20" x-data="{ activeSlide: 1, slideCount: 3 }">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full lg:w-1/2 px-4 my-auto">
                <div class="overflow-hidden text-center lg:text-left">
                    <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-duration-500 ease-in-out">
                        <div class="inline-block w-full whitespace-normal">
                            <p class="text-2xl font-black font-heading tracking-tight text-pink-500">
                                Danny Bailey</p>
                            <p class="mb-10 text-lg text-yellow-300 font-medium">CEO &amp;
                                Founder</p>
                            <h2 class="lg:max-w-lg mb-10 leading-tight text-4xl md:text-5xl font-black font-heading tracking-tight text-black">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
                        </div>
                        <div class="inline-block w-full whitespace-normal">
                            <p class="text-2xl font-black font-heading tracking-tight text-pink-500">
                                Sarah Johnson</p>
                            <p class="mb-10 text-lg text-yellow-300 font-medium">Marketing
                                Director</p>
                            <h2 class="lg:max-w-lg mb-10 leading-tight text-4xl md:text-5xl font-black font-heading tracking-tight text-black">Vivamus consectetur velit id arcu molestie</h2>
                        </div>
                        <div class="inline-block w-full whitespace-normal">
                            <p class="text-2xl font-black font-heading tracking-tight text-pink-500">
                                Michael Smith</p>
                            <p class="mb-10 text-lg text-yellow-300 font-medium">Creative

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

Testimonials generator

Tailwind Component #108

Tailwind CSS

NEUB

<section class="py-20">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4 items-center mb-12 lg:mb-16">
            <div class="w-full lg:w-1/2 px-4 mb-10 lg:mb-0">
                <div class="max-w-lg">
                    <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">Lorem Ipsum</span>
                    <h2 class="mt-6 mb-6 text-3xl sm:text-4xl lg:text-5xl leading-tight font-black font-heading tracking-tight uppercase">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
                    <p class="text-lg sm:text-xl lg:text-2xl leading-tight 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>
            </div>
            <div class="w-full lg:w-1/2 px-4">
                <div class="relative">
                    <div class="absolute inset-0 bg-pink-500 translate-x-4 translate-y-4 border-2 border-black"></div>
                    <img class="relative w-full max-h-80 object-cover border-2 border-black bg-black" 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-3 -right-3 w-16 h-16 bg-yellow-300 border-2 border-black"></div>
                    <div class="absolute -top-3 -left-3 w-12 h-12 bg-yellow-300 border-2 border-black"></div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -mx-4 -mb-12">
            <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 flex items-start">
                <span class="flex-shrink-0 inline-flex items-center justify-center w-12 h-12 bg-yellow-300 text-black text-lg font-black font-heading border-2 border-black">1</span>
                <div class="max-w-xs px-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

How it works generator

Tailwind Component #109

Tailwind CSS

NEUB

<section class="py-20 bg-yellow-300">
    <div class="container px-4 mx-auto">
        <div class="max-w-md mx-auto lg:max-w-none">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full lg:w-3/5 px-4 mb-6 lg:mb-0">
                    <div class="sm:flex gap-6 xl:items-center">
                        <span class="mb-6 sm:mb-0 flex flex-shrink-0 items-center justify-center w-16 h-16 p-3 bg-pink-500 border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
                            <svg class="text-white" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        <div class="sm:max-w-sm xl:max-w-none">
                            <h3 class="mb-1 text-3xl lg:text-4xl font-black font-heading tracking-tight">SIGN UP TO OUR NEWSLETTER</h3>
                            <p class="text-gray-700 font-medium text-lg">Raw updates
                                delivered straight to your inbox. No compromise.</p>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-2/5 px-4">
                    <div class="flex">
                        <input type="search" class="block w-full max-w-xs py-3 px-3 font-black font-heading text-lg tracking-wide border-4 border-black shadow-[8px_8px_0px_0px_#000000] focus:border-pink-500 focus:outline-none transition-colors" placeholder="TYPE YOUR EMAIL">
                        <button class="px-4 py-3 bg-pink-500 hover:bg-white text-white hover: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]">
                            SUBSCRIBE
                        </button>

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

Newsletter generator

Tailwind Component #110

Tailwind CSS

NEUB

<section class="py-20 bg-gray-900">
    <div class="container px-4 mx-auto">
        <div class="max-w-md mx-auto lg:max-w-none">
            <div class="flex flex-wrap items-center -mx-4">
                <div class="w-full lg:w-3/5 px-4 mb-6 lg:mb-0">
                    <div class="sm:flex gap-6 xl:items-center">
                        <span class="mb-6 sm:mb-0 flex flex-shrink-0 items-center justify-center w-16 h-16 p-3 bg-pink-500 border-4 border-black shadow-[8px_8px_0px_0px_#ffdf20]">
                            <svg class="text-white" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        <div class="sm:max-w-sm xl:max-w-none">
                            <h3 class="mb-1 text-3xl lg:text-4xl font-black font-heading text-white tracking-tight">SIGN UP TO OUR NEWSLETTER</h3>
                            <p class="text-gray-300 font-medium text-lg">Raw updates
                                delivered straight to your inbox. No compromise.</p>
                        </div>
                    </div>
                </div>
                <div class="w-full lg:w-2/5 px-4">
                    <div class="flex">
                        <input type="search" class="block w-full max-w-xs py-3 px-3 font-black font-heading text-lg tracking-wide border-4 border-black shadow-[8px_8px_0px_0px_#ffdf20] focus:border-pink-500 focus:outline-none transition-colors" placeholder="TYPE YOUR EMAIL">
                        <button class="px-4 py-3 bg-pink-500 hover:bg-white text-white hover: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_#ffdf20] hover:shadow-[4px_4px_0px_0px_#ffdf20]">
                            SUBSCRIBE
                        </button>

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-newsletter generator

Tailwind Component #111

Tailwind CSS

NEUB

<section class="py-20 bg-pink-500" x-data="{ tab: 1 }">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full xl:w-1/3 px-4 mb-12 xl:mb-0">
                <ul class="flex flex-wrap flex-col sm:flex-row xl:flex-col gap-3">
                    <li><a x-on:click.prevent="tab=1" class="block px-6 py-6 text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" :class="{ 'bg-yellow-300 text-black': tab==1, 'bg-white text-black hover:bg-yellow-300': tab!=1 }" href="#">LOREM IPSUM</a></li>
                    <li><a x-on:click.prevent="tab=2" class="block px-6 py-6 text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" :class="{ 'bg-yellow-300 text-black': tab==2, 'bg-white text-black hover:bg-yellow-300': tab!=2 }" href="#">DOLOR SIT</a></li>
                    <li><a x-on:click.prevent="tab=3" class="block px-6 py-6 text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" :class="{ 'bg-yellow-300 text-black': tab==3, 'bg-white text-black hover:bg-yellow-300': tab!=3 }" href="#">AMET CONSECTUTAR</a></li>
                    <li><a x-on:click.prevent="tab=4" class="block px-6 py-6 text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" :class="{ 'bg-yellow-300 text-black': tab==4, 'bg-white text-black hover:bg-yellow-300': tab!=4 }" href="#">DOMOR AT ELIS</a></li>
                </ul>
            </div>
            <div class="w-full xl:w-2/3 px-4">
                <div class="flex flex-wrap -m-4">
                    <div class="w-full lg:w-1/3 p-4">
                        <div class="relative">
                            <div class="absolute inset-0 bg-yellow-300 translate-x-3 translate-y-3 border-4 border-black">
                            </div>
                            <img class="relative w-full h-96 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-white border-4 border-black"></div>
                        </div>
                    </div>
                    <div class="w-full lg:w-2/3 p-4">
                        <div class="relative">
                            <div class="absolute inset-0 bg-yellow-300 translate-x-3 translate-y-3 border-4 border-black">

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

Portfolio generator

Tailwind Component #112

Tailwind CSS

NEUB

<section x-data="{ mobileNavOpen: false }" class="bg-gray-900 relative pb-5 overflow-hidden">
    <div class="relative container px-6 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="group block w-12 h-12 bg-white hover:bg-yellow-300 transition-colors border-2 border-black">
                    <svg class="w-6 h-6 mx-auto text-black" 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-16 mr-auto">
                <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-navigations generator

Tailwind Component #113

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-4xl mx-auto text-center">
            <span class="inline-block px-4 py-2 bg-yellow-300 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-white font-black font-heading lg:leading-[0.9] mb-8 tracking-tight uppercase">TAKE QUICK <span class="text-pink-500">ACTION</span> THAT INCREASES YOUR BRAND'S REGULAR PROFIT.</h2>
            <p class="mb-12 text-xl lg:text-2xl leading-relaxed text-gray-300 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="mb-12">
                <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="#">TRY DEMO</a>
            </div>
            <div class="px-5 lg:px-0">
                <div class="relative max-w-4xl mx-auto">
                    <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-white object-cover" 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-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-yellow-300 border-4 border-black"></div>
                </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

dark-cta generator

Tailwind Component #114

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-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">LATEST POSTS</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">BOLD</span> INSIGHTS</h2>
      <p class="text-xl lg:text-2xl leading-relaxed text-white font-medium">Raw,
        uncompromising thoughts on design that cuts through the noise. No fluff, just brutal honesty.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12 lg:-mb-16">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 lg:mb-16">
        <div class="h-full flex flex-col items-start bg-white border-4 border-black p-6 shadow-[8px_8px_0px_0px_#000000]">
          <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-2xl font-black font-heading tracking-tight">DESIGN
            SYSTEMS THAT DON'T SUCK</h2>
          <p class="mb-6 text-lg text-gray-700 leading-relaxed font-medium">Stop building
            boring interfaces. Learn how to create design systems that make users stop scrolling and start engaging.</p>
          <a class="mt-auto inline-flex items-center px-4 py-2 bg-pink-500 hover:bg-yellow-300 text-white hover:text-black font-black font-heading text-sm border-4 border-black transition-all transition-all hover:translate-x-2 hover:translate-y-2 shadow-[6px_6px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" href="#">
            <span>READ MORE</span>
            <span>
              <svg class="ml-2 w-4 h-4" 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="M9 5l7 7-7 7"></path>
              </svg>
            </span>
          </a>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Blog generator

Tailwind Component #115

Tailwind CSS

NEUB

<section x-data="{ mobileNavOpen: false }" class="bg-pink-500 relative pb-5 overflow-hidden">
    <div class="relative container px-6 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-white 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-16 mr-auto">
                <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

Navigation (horizontal) generator

Tailwind Component #116

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="flex flex-wrap items-center -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-12 xl:mb-0">
        <div class="mx-auto lg:mx-0 max-w-xl">
          <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">Lorem Ipsum</span>
          <h2 class="mt-8 mb-8 text-4xl leading-tight md:text-5xl lg:text-6xl font-black font-heading tracking-tight">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="text-xl leading-relaxed lg:text-2xl 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>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4 mb-10 lg:mb-0">
        <div class="relative max-w-xl mx-auto lg:max-w-none p-8 lg:pt-10 pb-10 lg:px-10 bg-pink-500 border-4 border-black shadow-[8px_8px_0px_0px_#000000] lg:text-center">
          <h3 class="mb-4 text-3xl font-black font-heading text-white tracking-tighter">Pro</h3>
          <span class="inline-block mb-8 text-5xl md:text-7xl font-black font-heading text-white tracking-tighter">$65,99</span>
          <ul class="mb-8 text-left text-lg space-y-4">
            <li class="mb-2 flex items-center">
              <div class="mr-4 w-4 h-4 bg-white"></div>
              <p class="text-lg text-white font-bold">Complete documentation</p>
            </li>
            <li class="mb-2 flex items-center">
              <div class="mr-4 w-4 h-4 bg-white"></div>
              <p class="text-lg text-white font-bold">Working materials in Figma</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

Pricing generator

Tailwind Component #117

Tailwind CSS

NEUB

<section class="py-20">
    <div class="container px-4 mx-auto text-center">
        <div class="max-w-lg lg:max-w-4xl mx-auto mb-16 lg:mb-24">
            <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">Lorem ipsum</span>
            <h2 class="mt-8 mb-6 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl font-black font-heading leading-[0.9] mb-8 tracking-tight uppercase">Lorem ipsum dolor sit amet <span class="text-pink-500">consectutar</span> domor at elis</h2>
            <p class="mb-12 text-xl lg:text-2xl leading-relaxed text-gray-700 mb-12 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
                <a class="inline-block" href="#">
                    <div 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]">
                        DOWNLOAD
                    </div>
                </a>
                <a href="#">
                    <div 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]">
                        LEARN MORE
                    </div>
                </a>
            </div>
        </div>
        <div class="px-5">
            <div class="relative w-full max-w-3xl mx-auto">
                <div class="absolute inset-0 bg-pink-500 translate-x-6 translate-y-6 border-4 border-black">
                </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

Application generator

Tailwind Component #118

Tailwind CSS

NEUB

<section class="py-20 bg-pink-500" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-12 xl:mb-0">
        <div class="mx-auto lg:mx-0 max-w-xl">
          <span class="inline-block px-4 py-2 bg-white text-black font-bold text-sm tracking-wider uppercase">Lorem Ipsum</span>
          <h2 class="mt-8 mb-8 text-4xl leading-tight md:text-5xl lg:text-6xl text-yellow-300 font-black font-heading tracking-tight uppercase">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="text-xl leading-relaxed lg:text-2xl text-white font-medium">Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec,
            accumsan aliquet orci.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 xl:w-1/3 px-4 mb-10 lg:mb-0">
        <div class="relative max-w-xl mx-auto lg:max-w-none p-8 lg:pt-10 pb-10 lg:px-10 bg-yellow-300 border-4 border-black shadow-[8px_8px_0px_0px_#000000] lg:text-center">
          <h3 class="mb-4 text-3xl font-black font-heading text-black tracking-tighter">Pro</h3>
          <span class="inline-block mb-8 text-5xl md:text-7xl font-black font-heading text-pink-500 tracking-tighter">$65,99</span>
          <ul class="mb-8 text-left text-lg space-y-4">
            <li class="mb-2 flex items-center">
              <div class="mr-4 w-4 h-4 bg-pink-500"></div>
              <p class="text-lg text-black font-bold">Complete documentation</p>
            </li>
            <li class="mb-2 flex items-center">
              <div class="mr-4 w-4 h-4 bg-pink-500"></div>
              <p class="text-lg text-black font-bold">Working materials in Figma</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

Pricing generator

Tailwind Component #119

Tailwind CSS

NEUB

<section class="py-20 bg-yellow-300">
    <div class="container px-4 mx-auto">
        <div class="max-w-xl lg:max-w-4xl 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 font-black font-heading lg:leading-[0.9] mb-8 tracking-tight uppercase">TAKE QUICK <span class="text-pink-500">ACTION</span> THAT INCREASES YOUR BRAND'S REGULAR PROFIT.</h2>
            <p class="mb-12 text-xl lg:text-2xl leading-relaxed text-black 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="mb-12">
                <a class="inline-block px-6 py-4 bg-pink-500 hover:bg-white 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="#">TRY DEMO</a>
            </div>
            <div class="px-5 lg:px-0">
                <div class="relative max-w-4xl mx-auto">
                    <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-white object-cover" 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-4 -right-4 w-24 h-24 bg-white border-4 border-black"></div>
                    <div class="absolute -top-4 -left-4 w-16 h-16 bg-white border-4 border-black"></div>
                </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

yellow-cta generator

Tailwind Component #120

Tailwind CSS

NEUB

<section class="py-20">
    <div class="container px-4 mx-auto">
        <div class="max-w-xl lg:max-w-4xl mx-auto text-center">
            <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">NEW FEATURE</span>
            <h2 class="mt-8 mb-8 text-5xl sm:text-6xl lg:text-7xl font-black font-heading lg:leading-[0.9] mb-8 tracking-tight uppercase">TAKE QUICK <span class="text-pink-500">ACTION</span> THAT INCREASES YOUR BRAND'S REGULAR PROFIT.</h2>
            <p class="mb-12 text-xl lg:text-2xl leading-relaxed text-gray-700 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="mb-12">
                <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="#">TRY DEMO</a>
            </div>
            <div class="px-5 lg:px-0">
                <div class="relative max-w-4xl mx-auto">
                    <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-white object-cover" 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-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-yellow-300 border-4 border-black"></div>
                </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

Hero Section with Bold Headline, Demo CTA, and Framed Photo

A centered hero section with a 'New Feature' badge, a large bold uppercase headline with a pink accent word, a short supporting paragraph, and a pink 'Try Demo' button above a framed photograph of a woman using a phone and card at a desk. The image is offset by a pink backing block with yellow accent squares at the corners.

Call to action 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 #101

Get the code for 13,400+ components

Tailwind Component #102

Get the code for 13,400+ components

Tailwind Component #103

Get the code for 13,400+ components

Tailwind Component #104

Get the code for 13,400+ components

Tailwind Component #105

Get the code for 13,400+ components

Tailwind Component #106

Get the code for 13,400+ components

Tailwind Component #107

Get the code for 13,400+ components

Tailwind Component #108

Get the code for 13,400+ components

Tailwind Component #109

Get the code for 13,400+ components

Tailwind Component #110

Get the code for 13,400+ components

Tailwind Component #111

Get the code for 13,400+ components

Tailwind Component #112

Get the code for 13,400+ components

Tailwind Component #113

Get the code for 13,400+ components

Tailwind Component #114

Get the code for 13,400+ components

Tailwind Component #115

Get the code for 13,400+ components

Tailwind Component #116

Get the code for 13,400+ components

Tailwind Component #117

Get the code for 13,400+ components

Tailwind Component #118

Get the code for 13,400+ components

Tailwind Component #119

Get the code for 13,400+ components

Tailwind Component #120

Get the code for 13,400+ components

Hero Section with Bold Headline, Demo CTA, and Framed Photo

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support