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

Tailwind CSS

NEUB

<section class="py-20 bg-gray-900" 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-yellow-300 text-black 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-white 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-gray-300 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_#f6339a]">
        <div class="absolute inset-0 bg-pink-500 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-yellow-300 text-black': tab==1, 'bg-white text-black hover:bg-yellow-300': 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-yellow-300 text-black': tab==2, 'bg-white text-black hover:bg-yellow-300': 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-yellow-300 text-black': tab==3, 'bg-white text-black hover:bg-yellow-300': 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-yellow-300 text-black': tab==4, 'bg-white text-black hover:bg-yellow-300': tab!=4 }" href="#">REFUNDS</a></li>
      </ul>
      <ul class="border-4 border-black shadow-[8px_8px_0px_0px_#f6339a]">
        <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-yellow-300 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

dark-faq generator

Tailwind Component #62

Tailwind CSS

NEUB

<section class="py-8 md:py-12 lg:py-20 bg-yellow-300">
    <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-pink-500 text-white 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-black font-black font-heading leading-[0.9] tracking-tight uppercase">READ OUR<br><span class="text-pink-500">LATEST</span> POSTS</h2>
            <p class="text-xl lg:text-2xl leading-relaxed text-black 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-pink-500 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-pink-500 text-white 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-black tracking-tight">LOREM IPSUM DOLOR SIT AMET</h2>
                <p class="max-w-2xl mb-6 text-lg text-black 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-pink-500 text-black hover:text-white 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 Background and Pink Offset Shadows

A blog section with a centered 'Our Blog' heading and subtitle above a mixed grid of post cards, each with a photo, pink date tag, bold title, short excerpt, and outlined Read More button. The cards use black-outlined images with pink offset shadows on a bright yellow background.

Blog generator

Tailwind Component #63

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-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-white font-black font-heading lg:leading-[0.9] mb-8 tracking-tight uppercase">Take <span class="text-yellow-300">quick
          action</span> that increases your brand's regular profit.</h2>
      <p class="mb-12 text-xl lg:text-2xl leading-relaxed text-white 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-yellow-300 hover:bg-white 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-yellow-300 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]">
          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

pink-cta generator

Tailwind Component #64

Tailwind CSS

NEUB

<section class="py-8 md:py-12 lg:py-20 bg-gray-900">
    <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-pink-500">LATEST</span> POSTS</h2>
            <p class="text-xl lg:text-2xl leading-relaxed text-gray-300 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-pink-500 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-gray-300 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-pink-500 hover:bg-yellow-300 text-white hover: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>
                    <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

dark-blog generator

Tailwind Component #65

Tailwind CSS

NEUB

<section class="pb-8 pt-8 md:pt-12 lg:pt-20 bg-pink-500">
  <div class="container px-4 mx-auto mb-12 lg:mb-20">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/3 xl:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="max-w-lg">
          <div class="mb-8 inline-block px-4 py-2 bg-yellow-300 text-black font-bold text-sm tracking-wider uppercase">
            CONTACT SECTION
          </div>
          <h2 class="text-5xl sm:text-6xl md:text-7xl text-white font-black font-heading leading-[0.9] tracking-tight uppercase">
            GET IN<br>
            <span class="text-yellow-300">TOUCH</span><br>
            WITH US
          </h2>
        </div>
      </div>
      <div class="w-full lg:w-2/3 xl:w-1/2 px-4">
        <div class="lg:max-w-xl lg:ml-auto flex flex-wrap bg-yellow-300 border-4 border-black p-8 shadow-[8px_8px_0px_0px_#000000]">
          <div class="w-full md:w-1/2">
            <h3 class="mb-4 text-2xl text-pink-500 font-black font-heading tracking-wider">ADDRESS</h3>
            <p class="mb-8 text-xl font-medium text-gray-800">1686 Geraldine Lane<br>New
              York, NY 10013</p>
          </div>
          <div class="w-full md:w-1/2">
            <h3 class="mb-4 text-2xl text-pink-500 font-black font-heading tracking-wider">CONTACTS

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

Tailwind CSS

NEUB

<section class="relative pt-8 pb-16 md:py-16 lg:py-24 bg-yellow-300  overflow-hidden">
        <div class="relative 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-pink-500 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 text-black 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-black 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-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]">
                            APP STORE
                        </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]">
                            GOOGLE PLAY
                        </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>
                    <div class="relative pt-6 px-6 border-4 border-black bg-white">

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 App Download Hero with Phone Mockups

A centered hero section on a solid yellow background with a pink eyebrow label, a large bold headline with pink accent word, a short paragraph, and App Store and Google Play buttons above an illustration of three outlined phone mockups in a bordered frame with decorative pink and yellow squares.

Application generator

Tailwind Component #67

Tailwind CSS

NEUB

<section class="relative py-20 bg-gray-900">
    <div class="absolute right-0 lg:top-0 bottom-0 h-96 lg:h-auto w-full lg:w-4/12 bg-white 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-yellow-300 text-black font-bold text-sm tracking-wider uppercase">
                        GET STARTED
                    </div>
                    <h2 class="mb-6 text-4xl leading-tight sm:text-5xl lg:text-6xl font-black font-heading tracking-tight text-white uppercase">Lorem ipsum dolor sit amet <span class="text-yellow-300">consectutar</span> domor at elis</h2>
                    <p class="text-base leading-relaxed lg:text-xl text-gray-300 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="lg:max-w-md relative mr-3 lg:mr-0">
                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-yellow-300 border-4 border-black"></div>
                    <form action="#" class="bg-pink-500 border-4 border-black p-8 shadow-[8px_8px_0px_0px_#000000]">
                        <span class="inline-block px-4 py-2 bg-black text-white font-bold text-xs tracking-wider uppercase">Sign Up</span>
                        <h3 class="mt-5 mb-8 text-3xl text-white font-black font-heading tracking-tight uppercase">Create new account</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-yellow-300 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-yellow-300 transition-colors" type="password" placeholder="Password">
                        <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-yellow-300 transition-colors" type="password" placeholder="Repeat password">

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-sign-in generator

Tailwind Component #68

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-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 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-black 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-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]">
          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

yellow-cta generator

Tailwind Component #69

Tailwind CSS

NEUB

<section class="py-20 bg-pink-500">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-16">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16">
        <div class="flex h-full bg-gray-900 border-2 border-black p-6 shadow-[8px_8px_0px_0px_#ffdf20]">
          <span class="mr-6 flex-shrink-0">
            <div class="w-12 h-12 bg-yellow-300 border-2 border-pink-500 flex items-center justify-center">
              <svg class="text-pink-500" width="48" height="48" 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>
          </span>
          <div>
            <h3 class="mb-4 text-xl md:text-2xl font-black font-heading text-yellow-300 tracking-tight">SECURITY IN SAVING</h3>
            <p class="text-base leading-relaxed text-gray-300 font-medium">Take care to
              develop resources continually and integrity them with previous projects. More interesting writings for
              your customers.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16">
        <div class="flex h-full bg-gray-900 border-2 border-black p-6 shadow-[8px_8px_0px_0px_#ffdf20]">
          <span class="mr-6 flex-shrink-0">
            <div class="w-12 h-12 bg-yellow-300 border-2 border-pink-500 flex items-center justify-center">

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

Features generator

Tailwind Component #70

Tailwind CSS

NEUB

<section class="pb-8 pt-8 md:pt-12 lg:pt-20">
  <div class="container px-4 mx-auto mb-12 lg:mb-20">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/3 xl:w-1/2 px-4 mb-8 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">
            CONTACT SECTION
          </div>
          <h2 class="text-5xl sm:text-6xl md:text-7xl font-black font-heading leading-[0.9] tracking-tight uppercase">
            GET IN<br>
            <span class="text-pink-500">TOUCH</span><br>
            WITH US
          </h2>
        </div>
      </div>
      <div class="w-full lg:w-2/3 xl:w-1/2 px-4">
        <div class="lg:max-w-xl lg:ml-auto flex flex-wrap bg-yellow-300 border-4 border-black p-8 shadow-[8px_8px_0px_0px_#000000]">
          <div class="w-full md:w-1/2">
            <h3 class="mb-4 text-2xl text-pink-500 font-black font-heading tracking-wider">ADDRESS</h3>
            <p class="mb-8 text-xl font-medium text-gray-800">1686 Geraldine Lane<br>New
              York, NY 10013</p>
          </div>
          <div class="w-full md:w-1/2">
            <h3 class="mb-4 text-2xl text-pink-500 font-black font-heading tracking-wider">CONTACTS

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Contact Section with Address Card and Map

A contact section with a bold two-line heading, a yellow outlined card listing address and email, and a wide map banner below with decorative yellow and pink offset squares. The layout places the heading on the left and the contact card on the right above a full-width map.

Contact generator

Tailwind Component #71

Tailwind CSS

NEUB

<section class="relative pt-8 pb-16 md:py-16 lg:py-24 bg-pink-500 overflow-hidden">
    <div class="relative 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-yellow-300 text-black 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 text-white uppercase">Lorem ipsum dolor sit amet <span class="text-yellow-300">consectutar</span> domor at elis</h2>
            <p class="mb-12 text-xl lg:text-2xl leading-relaxed text-white 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-yellow-300 hover:bg-white 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]">
                        APP STORE
                    </div>
                </a>
                <a href="#">
                    <div class="inline-block px-6 py-4 bg-white hover:bg-yellow-300 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]">
                        GOOGLE PLAY
                    </div>
                </a>
            </div>
        </div>
        <div class="px-5">
            <div class="relative w-full max-w-3xl mx-auto">
                <div class="absolute inset-0 bg-yellow-300 translate-x-6 translate-y-6 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

Pink App Store Hero with Phone Mockups

A centered hero section on a solid pink background with a yellow eyebrow label, a large bold white and yellow headline, supporting paragraph, and App Store and Google Play buttons. Below the text, a bordered illustration shows three outline phone mockups with decorative yellow and pink squares.

Application generator

Tailwind Component #72

Tailwind CSS

NEUB

<section class="py-20">
  <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-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 <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-700 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

Centered Hero with Pink Accent Heading and Dual CTA Buttons

A centered promotional hero section with a small "NEW FEATURE" badge, a large bold heading with pink highlighted text, a supporting paragraph, and two call-to-action buttons: a filled pink "TRY DEMO" button and an outlined "SHARE WITH FRIENDS" button, both with hard offset shadows.

Call to action generator

Tailwind Component #73

Tailwind CSS

NEUB

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="py-12 px-6 sm:px-12 bg-pink-500 border-4 border-black shadow-[12px_12px_0px_0px_#000000]">
      <div class="max-w-md lg:max-w-5xl mx-auto">
        <div class="flex flex-wrap items-center -mx-4">
          <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
            <div class="max-w-md lg:mx-auto mb-5 lg:mb-0">
              <h3 class="mb-2 text-3xl sm:text-4xl font-black font-heading tracking-tight text-white">SIGN UP TO OUR NEWSLETTER</h3>
              <p class="max-w-sm text-white font-medium text-lg">Raw updates delivered
                straight to your inbox. No fluff, just brutal design insights.</p>
            </div>
          </div>
          <div class="w-full lg:w-1/2 px-4">
            <form action="#">
              <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-yellow-300 focus:outline-none transition-colors" placeholder="TYPE YOUR EMAIL">
                <button class="px-4 py-3 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]">
                  SUBSCRIBE
                </button>
              </div>
            </form>
          </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

Pink Newsletter Signup Banner with Email Input and Yellow Subscribe Button

A full-width pink promotional banner with a bold white heading, supporting text, and an inline email input paired with a yellow Subscribe button. Thick black outlines and a hard offset black shadow give it a neo-brutalist style.

Newsletter generator

Tailwind Component #74

Tailwind CSS

NEUB

<section class="relative pt-8 pb-16 md:py-16 lg:py-24 overflow-hidden">
    <div class="relative 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 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]">
                        APP STORE
                    </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]">
                        GOOGLE PLAY
                    </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 #75

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="max-w-xl lg:max-w-2xl mx-auto mb-12 text-center">
            <span class="inline-block px-4 py-2 bg-yellow-300 text-black 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-tighter text-white">CHOOSE YOUR<br><span class="text-yellow-300">POWER</span> LEVEL</h2>
            <p class="mb-12 text-lg sm:text-xl lg:text-2xl leading-tight text-white 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 hover:bg-yellow-300 border-r-0 transition-all" :class="{ 'bg-yellow-300 text-black': pricing == $refs.pricing1.textContent, 'bg-white text-black': 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-yellow-300 transition-all" :class="{ 'bg-yellow-300 text-black': pricing == $refs.pricing2.textContent, 'bg-white text-black': 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_#ffdf20]">
                    <div class="text-center mb-8">
                        <h3 class="text-2xl font-black font-heading text-white mb-4 tracking-wider">
                            STARTER</h3>
                        <span class="inline-block text-5xl md:text-6xl font-black font-heading text-yellow-300 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-yellow-300 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

Pricing generator

Tailwind Component #76

Tailwind CSS

NEUB

<section class="py-20 bg-pink-500">
  <div class="container px-4 mx-auto">
    <div class="py-12 px-6 sm:px-12 bg-white border-4 border-black shadow-[12px_12px_0px_0px_#000000]">
      <div class="max-w-md lg:max-w-5xl mx-auto">
        <div class="flex flex-wrap items-center -mx-4">
          <div class="w-full lg:w-1/2 px-4 mb-6 lg:mb-0">
            <div class="max-w-md lg:mx-auto mb-5 lg:mb-0">
              <h3 class="mb-2 text-3xl sm:text-4xl font-black font-heading tracking-tight text-black">SIGN UP TO OUR NEWSLETTER</h3>
              <p class="max-w-sm text-gray-700 font-medium text-lg">Raw updates delivered
                straight to your inbox. No fluff, just brutal design insights.</p>
            </div>
          </div>
          <div class="w-full lg:w-1/2 px-4">
            <form action="#">
              <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-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]">
                  SUBSCRIBE
                </button>
              </div>
            </form>
          </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

Newsletter generator

Tailwind Component #77

Tailwind CSS

NEUB

<section class="py-20 bg-yellow-300">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4 -mb-10">
            <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-10 text-center">
                <div class="mx-auto mb-8 w-24 h-24 bg-pink-500 border-4 border-black flex items-center justify-center shadow-[6px_6px_0px_0px_#000000]">
                    <svg class="text-black" width="48" height="48" 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" stroke="currentColor" stroke-width="1"></path>
                    </svg>
                </div>
                <h3 class="mb-4 text-3xl font-black font-heading tracking-tight text-black">600M</h3>
                <p class="text-lg font-bold text-black uppercase tracking-wider">DOLOR SIT
                    AMET CONSECTUTAR</p>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-10 text-center">
                <div class="mx-auto mb-8 w-24 h-24 bg-white border-4 border-black flex items-center justify-center shadow-[6px_6px_0px_0px_#000000]">
                    <svg class="text-black" width="48" height="48" 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" stroke="currentColor" stroke-width="1"></path>
                    </svg>
                </div>
                <h3 class="mb-4 text-3xl font-black font-heading tracking-tight text-black">600M</h3>
                <p class="text-lg font-bold text-black uppercase tracking-wider">DOLOR SIT
                    AMET CONSECTUTAR</p>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-10 text-center">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Four-column stats row with icon tiles and yellow background

A horizontal row of four statistic items on a yellow background, each with a square icon tile (alternating pink and white with black offset shadows), a bold "600M" figure, and uppercase placeholder label text. The layout is a simple evenly spaced row of metric callouts.

Stats generator

Tailwind Component #78

Tailwind CSS

NEUB

<section class="py-20 bg-yellow-300">
    <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-white 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-pink-500 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-white 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-white 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-pink-500 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

Portfolio generator

Tailwind Component #79

Tailwind CSS

NEUB

<section class="relative py-20">
    <div class="absolute right-0 lg:top-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">
                        GET STARTED
                    </div>
                    <h2 class="mb-6 text-4xl leading-tight sm:text-5xl lg:text-6xl font-black font-heading tracking-tight text-black uppercase">Lorem ipsum dolor sit amet <span class="text-pink-500">consectutar</span> domor at elis</h2>
                    <p class="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>
            </div>
            <div class="w-full lg:w-1/2 px-4">
                <div class="lg:max-w-md relative mr-3 lg:mr-0">
                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-yellow-300 border-4 border-black"></div>
                    <form action="#" class="bg-white border-4 border-black p-8 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">Sign Up</span>
                        <h3 class="mt-5 mb-8 text-3xl font-black font-heading tracking-tight uppercase">Create new account</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">
                        <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="Repeat password">

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 sign-up hero with account creation form

A split-screen hero section with a bold headline, body copy, and a GET STARTED badge on the left, paired with a bordered sign-up card on the right containing email and password fields, a terms checkbox, and a yellow GET STARTED button. The right side uses a pink panel with offset black shadows and a yellow accent square.

Tailwind Component #80

Tailwind CSS

NEUB

<section class="relative py-20 bg-yellow-300">
    <div class="absolute right-0 lg:top-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">
                        GET STARTED
                    </div>
                    <h2 class="mb-6 text-4xl leading-tight sm:text-5xl lg:text-6xl font-black font-heading tracking-tight text-black uppercase">Lorem ipsum dolor sit amet <span class="text-pink-500">consectutar</span> domor at elis</h2>
                    <p class="text-base leading-relaxed lg:text-xl text-black 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="lg:max-w-md relative mr-3 lg:mr-0">
                    <div class="absolute -top-4 -right-4 w-16 h-16 bg-yellow-300 border-4 border-black"></div>
                    <form action="#" class="bg-white border-4 border-black p-8 shadow-[8px_8px_0px_0px_#000000]">
                        <span class="inline-block px-4 py-2 bg-pink-500 text-white font-bold text-xs tracking-wider uppercase">Sign Up</span>
                        <h3 class="mt-5 mb-8 text-3xl font-black font-heading tracking-tight uppercase">Create new account</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">
                        <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="Repeat password">

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

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

Get the code for 13,400+ components

Tailwind Component #62

Get the code for 13,400+ components

Blog Post Card Grid with Yellow Background and Pink Offset Shadows

Tailwind Component #63

Get the code for 13,400+ components

Tailwind Component #64

Get the code for 13,400+ components

Tailwind Component #65

Get the code for 13,400+ components

Tailwind Component #66

Get the code for 13,400+ components

Yellow App Download Hero with Phone Mockups

Tailwind Component #67

Get the code for 13,400+ components

Tailwind Component #68

Get the code for 13,400+ components

Tailwind Component #69

Get the code for 13,400+ components

Tailwind Component #70

Get the code for 13,400+ components

Contact Section with Address Card and Map

Tailwind Component #71

Get the code for 13,400+ components

Pink App Store Hero with Phone Mockups

Tailwind Component #72

Get the code for 13,400+ components

Centered Hero with Pink Accent Heading and Dual CTA Buttons

Tailwind Component #73

Get the code for 13,400+ components

Pink Newsletter Signup Banner with Email Input and Yellow Subscribe Button

Tailwind Component #74

Get the code for 13,400+ components

Tailwind Component #75

Get the code for 13,400+ components

Tailwind Component #76

Get the code for 13,400+ components

Tailwind Component #77

Get the code for 13,400+ components

Four-column stats row with icon tiles and yellow background

Tailwind Component #78

Get the code for 13,400+ components

Tailwind Component #79

Get the code for 13,400+ components

Split-screen sign-up hero with account creation form

Tailwind Component #80

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support