Tailwind Components in Neub library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #81

Tailwind CSS

NEUB

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #82

Tailwind CSS

NEUB

<section class="py-20 bg-gray-900" 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-white 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-yellow-300">CHOOSE YOUR<br><span class="text-pink-500">POWER</span> LEVEL</h2>
            <p class="mb-12 text-lg sm:text-xl lg:text-2xl leading-tight text-gray-300 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-pink-500 border-r-0 hover:bg-white transition-all" :class="{ 'bg-white text-black': pricing == $refs.pricing1.textContent, 'bg-yellow-300 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-pink-500 hover:bg-white transition-all" :class="{ 'bg-white text-black': pricing == $refs.pricing2.textContent, 'bg-yellow-300 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-yellow-300 border-4 border-black shadow-[8px_8px_0px_0px_#f6339a]">
                    <div class="text-center mb-8">
                        <h3 class="text-2xl font-black font-heading text-pink-500 mb-4 tracking-wider">
                            STARTER</h3>
                        <span class="inline-block text-5xl md:text-6xl font-black font-heading text-black 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-white 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

Tailwind Component #83

Tailwind CSS

NEUB

<section class="pb-8 pt-8 md:pt-12 lg:pt-20 bg-gray-900">
  <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-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_#ffffff]">
          <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

Tailwind Component #84

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #85

Tailwind CSS

NEUB

<section class="py-8 md:py-12 lg:py-20 bg-white">
    <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-black 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 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-700 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-black tracking-tight">LOREM IPSUM DOLOR SIT AMET</h2>
                <p class="max-w-2xl mb-6 text-lg text-gray-700 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

Tailwind Component #86

Tailwind CSS

NEUB

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #87

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Testimonial Section with Photo and Yellow Background

A split-screen testimonial section with a framed photo of a desk setup on the left and a pink "Testimonial" tag, bold uppercase heading, quote body text, and attribution to Danny Bailey, CEO & Founder, on the right. Decorative pink offset frame and squares add a bold graphic style on a yellow background.

Tailwind Component #88

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 justify-between items-center py-8 border-b-4 border-white">
            <a href="#">
                <img src="neub-assets/logos/neub-white-logo.png" alt="" class="h-7">
            </a>
            <div class="lg:hidden">
                <button x-on:click="mobileNavOpen = !mobileNavOpen" class="block w-12 h-12 bg-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="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:flex items-center space-x-0">
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">ABOUT</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">WORK</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white border-r-0" href="#">SERVICES</a></li>
                <li><a class="block px-6 py-4 text-lg font-bold hover:bg-yellow-300 text-white hover:text-black transition-all border-2 border-white" href="#">CONTACT</a></li>
            </ul>
            <div class="hidden lg:block">
                <button class="px-8 py-4 bg-white hover:bg-yellow-300 text-black font-black font-heading text-lg border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]">
                    GET STARTED
                </button>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #89

Tailwind CSS

NEUB

<section class="py-20 bg-gray-900">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center -mx-4 -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-white flex items-center justify-center shadow-[6px_6px_0px_0px_#ffffff]">
                    <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-white">600M</h3>
                <p class="text-lg font-bold text-gray-600 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-yellow-300 border-4 border-white flex items-center justify-center shadow-[6px_6px_0px_0px_#ffffff]">
                    <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-white">600M</h3>
                <p class="text-lg font-bold text-gray-600 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

Tailwind Component #90

Tailwind CSS

NEUB

<section class="py-20 bg-pink-500" 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-black text-white font-bold text-sm tracking-wider uppercase">FREQUENTLY ASKED QUESTIONS</span>
      <h2 class="mt-8 mb-6 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl text-white font-black font-heading leading-[0.9] tracking-tight uppercase">GET YOUR<br><span class="text-yellow-300">ANSWERS</span> HERE</h2>
      <p class="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 answers to your questions. No fluff, just the facts you need
        to move forward.</p>
    </div>

    <div class="max-w-2xl mx-auto">
      <ul class="relative flex flex-wrap mb-12 shadow-[8px_8px_0px_0px_#000000]">
        <div class="absolute inset-0 bg-black translate-y-2 translate-x-2"></div>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='general'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-yellow-300 text-black': tab==1, 'bg-white text-black hover:bg-yellow-300 hover:text-black': 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 hover:text-black': 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 hover:text-black': 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 hover:text-black': tab!=4 }" href="#">REFUNDS</a></li>
      </ul>
      <ul class="border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
        <li class="bg-white border-b-4 border-black last:border-b-0" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left font-black font-heading p-6 hover:bg-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

Tailwind Component #91

Tailwind CSS

NEUB

<section class="py-20" 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-black text-white font-bold text-sm tracking-wider uppercase">FREQUENTLY ASKED QUESTIONS</span>
      <h2 class="mt-8 mb-6 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl 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-700 font-medium max-w-md lg:max-w-xl mx-auto">Raw, uncompromising answers to your questions. No fluff, just the facts you need
        to move forward.</p>
    </div>

    <div class="max-w-2xl mx-auto">
      <ul class="relative flex flex-wrap mb-12 shadow-[8px_8px_0px_0px_#000000]">
        <div class="absolute inset-0 bg-black translate-y-2 translate-x-2"></div>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='general'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==1, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=1 }" href="#">GENERAL</a></li>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='payments'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==2, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=2 }" href="#">PAYMENTS</a></li>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='returns'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==3, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=3 }" href="#">RETURNS</a></li>
        <li class="w-1/2 sm:w-1/4"><a x-on:click="tab='refunds'" class="block w-full px-3 py-6 text-center text-base sm:text-lg md:text-xl xl:text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-1 hover:translate-y-2" :class="{ 'bg-pink-500 text-white': tab==4, 'bg-white text-black hover:bg-pink-500 hover:text-white': tab!=4 }" href="#">REFUNDS</a></li>
      </ul>
      <ul class="border-4 border-black shadow-[8px_8px_0px_0px_#000000]">
        <li class="bg-white border-b-4 border-black last:border-b-0" x-data="{ accordion: false }">
          <button class="group w-full flex justify-between items-center text-left font-black font-heading p-6 hover:bg-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

Neo-brutalist FAQ Section with Pink Accent Heading and Accordion List

A centered FAQ section with a black eyebrow label, a large two-line heading with pink emphasis, a short supporting paragraph, and a stacked accordion of uppercase questions with chevron toggles. Heavy black offset shadows and thick borders give the section a bold, blocky style.

Tailwind Component #92

Tailwind CSS

NEUB

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #93

Tailwind CSS

NEUB

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #94

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #95

Tailwind CSS

NEUB

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

Tailwind Component #96

Tailwind CSS

NEUB

<section class="relative overflow-x-hidden py-20 bg-gray-900" 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-white">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-white">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

Tailwind Component #97

Tailwind CSS

NEUB

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

Tailwind Component #98

Tailwind CSS

NEUB

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Cookie Policy Consent Banner with Allow and Decline Buttons

A pink full-width cookie consent notice with a black label, yellow heading, paragraph of policy text, and two offset-shadow buttons for allowing or declining cookies. The content is stacked left-aligned and occupies the left portion of the banner.

Tailwind Component #99

Tailwind CSS

NEUB

<section class="relative overflow-x-hidden py-20 bg-pink-500" 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-white">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-white">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-white">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-white">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-white">
                                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

Tailwind Component #100

Tailwind CSS

NEUB

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

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Tailwind CSS Components – Neub Library

Framework

UI Library

Components

Tailwind Component #81

Get the code for 13,400+ components

Tailwind Component #82

Get the code for 13,400+ components

Tailwind Component #83

Get the code for 13,400+ components

Tailwind Component #84

Get the code for 13,400+ components

Tailwind Component #85

Get the code for 13,400+ components

Tailwind Component #86

Get the code for 13,400+ components

Tailwind Component #87

Get the code for 13,400+ components

Testimonial Section with Photo and Yellow Background

Tailwind Component #88

Get the code for 13,400+ components

Tailwind Component #89

Get the code for 13,400+ components

Tailwind Component #90

Get the code for 13,400+ components

Tailwind Component #91

Get the code for 13,400+ components

Neo-brutalist FAQ Section with Pink Accent Heading and Accordion List

Tailwind Component #92

Get the code for 13,400+ components

Tailwind Component #93

Get the code for 13,400+ components

Tailwind Component #94

Get the code for 13,400+ components

Tailwind Component #95

Get the code for 13,400+ components

Tailwind Component #96

Get the code for 13,400+ components

Tailwind Component #97

Get the code for 13,400+ components

Tailwind Component #98

Get the code for 13,400+ components

Cookie Policy Consent Banner with Allow and Decline Buttons

Tailwind Component #99

Get the code for 13,400+ components

Tailwind Component #100

Get the code for 13,400+ components

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support