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

Tailwind CSS

NEUB

<section class="py-20 border-t-4 border-black">
    <div class="container px-4 mx-auto">
        <div class="text-center mb-12">
            <div class="inline-block px-4 py-2 bg-black text-white font-black font-heading text-sm tracking-wider uppercase mb-8">
                TRUSTED BY INDUSTRY LEADERS
            </div>
            <h2 class="text-4xl lg:text-5xl font-black font-heading tracking-tighter text-black mb-4">
                <span class="text-pink-500">BOLD</span> COMPANIES USE NEUB
            </h2>
            <p class="text-lg lg:text-xl text-gray-700 font-medium max-w-lg mx-auto">
                Join thousands of forward-thinking teams building uncompromising interfaces
            </p>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-1/2 lg:w-1/4 p-4">
                <div class="py-6 px-8 bg-white hover:bg-pink-500 border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000] group">
                    <img class="h-8 mx-auto filter contrast-100 group-hover:filter group-hover:brightness-0 group-hover:invert transition-all" src="neub-assets/logos/jiggle-color.svg" alt="">
                </div>
            </div>
            <div class="w-1/2 lg:w-1/4 p-4">
                <div class="py-6 px-8 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000] group">
                    <img class="h-8 mx-auto filter contrast-100 group-hover:filter group-hover:brightness-0 transition-all" src="neub-assets/logos/symtric-color.svg" alt="">
                </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

Trusted by Industry Leaders Logo Strip with Pink CTA

A centered social proof section with a black badge, a bold heading with a pink highlight word, subtext, a row of four outlined company logo cards with hard offset shadows, and a pink call-to-action button. The layout is a centered vertical stack with a horizontal logo row.

Tailwind Component #122

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #123

Tailwind CSS

NEUB

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #124

Tailwind CSS

NEUB

<section class="py-20 bg-gray-900">
    <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-yellow-300 text-black 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 text-white font-black font-heading tracking-tight uppercase">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
                    <p class="text-lg sm:text-xl lg:text-2xl leading-tight text-gray-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="relative">
                    <div class="absolute inset-0 bg-pink-500 translate-x-4 translate-y-4 border-2 border-black"></div>
                    <img class="relative w-full max-h-80 object-cover border-2 border-black bg-black" src="https://images.unsplash.com/photo-1713947506242-8fcae733d158?q=80&amp;w=1332&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                    <div class="absolute -bottom-3 -right-3 w-16 h-16 bg-yellow-300 border-2 border-black"></div>
                    <div class="absolute -top-3 -left-3 w-12 h-12 bg-yellow-300 border-2 border-black"></div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -mx-4 -mb-12">
            <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 flex items-start">
                <span class="flex-shrink-0 inline-flex items-center justify-center w-12 h-12 bg-yellow-300 text-black text-lg font-black font-heading border-2 border-pink-500">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

Tailwind Component #125

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/3 px-4 mb-12 lg:mb-0 text-center">
        <span class="mx-auto mb-6 flex items-center justify-center bg-white w-16 h-16 border-2 border-black shadow-[6px_6px_0px_0px_#000000]">
          <svg class="text-black" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
          </svg>
        </span>
        <h3 class="mb-4 text-xl md:text-2xl font-black font-heading tracking-tight text-black">CHANGE
          OF ACCESS</h3>
        <p class="text-black leading-relaxed max-w-sm mx-auto lg:px-12 font-medium">Take
          care to develop resources continually and integrity them with previous projects.</p>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0 text-center">
        <span class="mx-auto mb-6 flex items-center justify-center bg-white w-16 h-16 border-2 border-black shadow-[6px_6px_0px_0px_#000000]">
          <svg class="text-black" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
          </svg>
        </span>
        <h3 class="mb-4 text-xl md:text-2xl font-black font-heading tracking-tight text-black">FREQUENT
          AUTHENTICATION</h3>
        <p class="text-black leading-relaxed max-w-sm mx-auto lg:px-12 font-medium">Take
          care to develop resources continually and integrity them with previous projects.</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 #126

Tailwind CSS

NEUB

<section class="relative py-20">
  <div class="container px-4 mx-auto mb-10">
    <div class="w-full lg:w-1/2">
      <div class="flex flex-wrap lg:h-96 max-w-xl lg:max-w-2xl">
        <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-5xl sm:text-6xl xl:text-7xl leading-tight font-black font-heading tracking-tight text-black">LOREM IPSUM <span class="text-pink-500">DOLOR
            SIT</span> AMET CONSECTUTAR DOMOR</h2>
        <div class="border-4 border-black bg-white p-4 shadow-[8px_8px_0px_0px_#000000]">
          <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>

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

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="relative w-32 h-32 mx-auto mb-8 bg-white border-4 border-black shadow-[8px_8px_0px_0px_#f6339a]">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <p class="text-4xl font-black font-heading text-black tracking-tight">65%</p>
                    </div>
                    <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-300 border-2 border-black"></div>
                    <div class="absolute -bottom-2 -left-2 w-6 h-6 bg-pink-500 border-2 border-black"></div>
                </div>
                <h3 class="mb-3 text-2xl font-black font-heading tracking-tight text-black">MARKET SIZE
                </h3>
                <p class="text-black text-lg font-medium">Raw market dominance metrics</p>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-10 text-center">
                <div class="relative w-32 h-32 mx-auto mb-8 bg-black border-4 border-pink-500 shadow-[8px_8px_0px_0px_#f6339a]">
                    <div class="absolute inset-0 flex items-center justify-center">
                        <p class="text-3xl md:text-4xl font-black font-heading text-white tracking-tight">78%</p>
                    </div>
                    <div class="absolute -top-2 -right-2 w-8 h-8 bg-pink-500 border-2 border-black"></div>
                    <div class="absolute -bottom-2 -left-2 w-6 h-6 bg-yellow-300 bg-pink-500 border-2 border-black">
                    </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

Tailwind Component #128

Tailwind CSS

NEUB

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Contact Section with Address and Phone Cards and Map

A two-column contact section with a "Contact Info" badge, a bold heading, intro copy, and two yellow bordered cards showing an address and email/phone, alongside a map illustration with pink and yellow offset decoration.

Tailwind Component #129

Tailwind CSS

NEUB

<section class="py-8 md:py-12 lg:py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-2xl mx-auto mb-16 lg:mb-20 text-center">
      <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">LATEST POSTS</span>
      <h2 class="mt-8 mb-6 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl font-black font-heading leading-[0.9] tracking-tight uppercase">READ OUR<br><span class="text-pink-500">BOLD</span>
        INSIGHTS</h2>
      <p class="text-xl lg:text-2xl leading-relaxed text-gray-700 font-medium">Raw,
        uncompromising thoughts on design that cuts through the noise. No fluff, just brutal honesty.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12 lg:-mb-16">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12 lg:mb-16">
        <div class="h-full flex flex-col items-start bg-white border-4 border-black p-6 shadow-[8px_8px_0px_0px_#000000]">
          <span class="inline-block px-3 py-1 bg-yellow-300 text-black font-bold text-xs tracking-wider uppercase">10 JUN 2022 19:40</span>
          <h2 class="mt-4 mb-4 text-2xl font-black font-heading tracking-tight">DESIGN
            SYSTEMS THAT DON'T SUCK</h2>
          <p class="mb-6 text-lg text-gray-700 leading-relaxed font-medium">Stop building
            boring interfaces. Learn how to create design systems that make users stop scrolling and start engaging.</p>
          <a class="mt-auto inline-flex items-center px-4 py-2 bg-pink-500 hover:bg-yellow-300 text-white hover:text-black font-black font-heading text-sm border-4 border-black transition-all transition-all hover:translate-x-2 hover:translate-y-2 shadow-[6px_6px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" href="#">
            <span>READ MORE</span>
            <span>
              <svg class="ml-2 w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
              </svg>
            </span>

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

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

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

Tailwind CSS

NEUB

<footer class="py-20 bg-white">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center justify-between">
            <div class="w-full lg:w-1/5 mb-6 lg:mb-0">
                <a href="#">
                    <img src="neub-assets/logos/neub-logo.png" alt="" class="h-5">
                </a>
            </div>
            <div class="w-full lg:w-auto">
                <ul class="flex flex-wrap items-center space-x-2 md:space-x-0">
                    <li class="mb-4 md:mb-0"><a class="block px-6 py-4 text-base lg:text-lg font-bold hover:bg-yellow-300 hover:text-black transition-all border-2 border-pink-500 md:border-r-0 text-black" href="#">ABOUT</a></li>
                    <li class="mb-4 md:mb-0"><a class="block px-6 py-4 text-base lg:text-lg font-bold hover:bg-yellow-300 hover:text-black transition-all border-2 border-pink-500 md:border-r-0 text-black" href="#">COMPANY</a></li>
                    <li class="mb-4 md:mb-0"><a class="block px-6 py-4 text-base lg:text-lg font-bold hover:bg-yellow-300 hover:text-black transition-all border-2 border-pink-500 md:border-r-0 text-black" href="#">SERVICES</a></li>
                    <li class="mb-4 md:mb-0"><a class="block px-6 py-4 text-base lg:text-lg font-bold hover:bg-yellow-300 hover:text-black transition-all border-2 border-pink-500 text-black" href="#">TESTIMONIALS</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="mt-16 mb-8 border-b-4 border-pink-500"></div>
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap justify-between items-center">
            <p class="w-full lg:w-auto mt-4 order-last lg:order-first text-lg font-bold text-gray-400 tracking-wider">ALL RIGHTS RESERVED. © Neub Inc.</p>
            <div class="order-first lg:order-last flex items-center space-x-4 -mb-4">
                <a class="inline-flex items-center justify-center w-12 h-12 mb-4 bg-white hover:bg-yellow-300 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">

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

Tailwind CSS

NEUB

<footer class="py-20 bg-yellow-300">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap items-center justify-between">
            <div class="w-full lg:w-1/5 mb-6 lg:mb-0">
                <a href="#">
                    <img src="neub-assets/logos/neub-logo.png" alt="" class="h-5">
                </a>
            </div>
            <div class="w-full lg:w-auto">
                <ul class="flex flex-wrap items-center space-x-2 md:space-x-0">
                    <li class="mb-4 md:mb-0"><a class="block px-6 py-4 text-base lg:text-lg font-bold hover:bg-pink-500 transition-all border-2 border-white md:border-r-0 text-black hover:text-white" href="#">ABOUT</a></li>
                    <li class="mb-4 md:mb-0"><a class="block px-6 py-4 text-base lg:text-lg font-bold hover:bg-pink-500 transition-all border-2 border-white md:border-r-0 text-black hover:text-white" href="#">COMPANY</a></li>
                    <li class="mb-4 md:mb-0"><a class="block px-6 py-4 text-base lg:text-lg font-bold hover:bg-pink-500 transition-all border-2 border-white md:border-r-0 text-black hover:text-white" href="#">SERVICES</a></li>
                    <li class="mb-4 md:mb-0"><a class="block px-6 py-4 text-base lg:text-lg font-bold hover:bg-pink-500 transition-all border-2 border-white text-black hover:text-white" href="#">TESTIMONIALS</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="mt-16 mb-8 border-b-4 border-white"></div>
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap justify-between items-center">
            <p class="w-full lg:w-auto mt-4 order-last lg:order-first text-lg font-bold text-pink-500 tracking-wider">ALL RIGHTS RESERVED. © Neub Inc.</p>
            <div class="order-first lg:order-last flex items-center space-x-4 -mb-4">
                <a class="group inline-flex items-center justify-center w-12 h-12 mb-4 bg-white hover:bg-pink-500 border-4 border-black transition-all hover:translate-x-1 hover:translate-y-1 shadow-[4px_4px_0px_0px_#000000] hover:shadow-[2px_2px_0px_0px_#000000]" href="#">

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

Tailwind CSS

NEUB

<section class="relative py-20 bg-yellow-300">
  <div class="container px-4 mx-auto mb-10">
    <div class="w-full lg:w-1/2">
      <div class="flex flex-wrap lg:h-96 max-w-xl lg:max-w-2xl">
        <div class="flex mb-6 items-center justify-center">
          <a class="text-sm font-black font-heading text-black hover:text-pink-500" href="#">HOME</a>
          <svg class="w-3 h-3 mx-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
          </svg>
          <a class="text-sm font-black font-heading text-black hover:text-pink-500" href="#">BLOG</a>
          <svg class="w-3 h-3 mx-4 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
          </svg>
          <a class="text-sm font-black font-heading text-pink-500" href="#">ARTICLE</a>
        </div>
        <h2 class="mb-8 text-5xl sm:text-6xl xl:text-7xl leading-tight font-black font-heading tracking-tight text-black">LOREM IPSUM <span class="text-pink-500">DOLOR
            SIT</span> AMET CONSECTUTAR DOMOR</h2>
        <div class="border-4 border-black bg-white p-4 shadow-[8px_8px_0px_0px_#000000]">
          <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>

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

Tailwind CSS

NEUB

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #135

Tailwind CSS

NEUB

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #136

Tailwind CSS

NEUB

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0 text-center">
        <span class="mx-auto mb-6 flex items-center justify-center bg-white w-16 h-16 border-2 border-black shadow-[6px_6px_0px_0px_#000000]">
          <svg class="text-black" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
          </svg>
        </span>
        <h3 class="mb-4 text-xl md:text-2xl font-black font-heading tracking-tight text-black">CHANGE
          OF ACCESS</h3>
        <p class="text-gray-500 leading-relaxed max-w-sm mx-auto lg:px-12 font-medium">
          Take care to develop resources continually and integrity them with previous projects.</p>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0 text-center">
        <span class="mx-auto mb-6 flex items-center justify-center bg-white w-16 h-16 border-2 border-black shadow-[6px_6px_0px_0px_#000000]">
          <svg class="text-black" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.1332 14.5333C18.2665 14.6667 18.3998 14.6667 18.6665 14.6667H27.9998C28.7998 14.6667 29.3332 14.1333 29.3332 13.3333C29.3332 13.0667 29.3332 12.9333 29.1998 12.8L24.5332 3.46667C24.1332 2.8 23.3332 2.53334 22.6665 2.93334C22.5332 3.06667 22.2665 3.2 22.1332 3.46667L17.4665 12.8C17.1998 13.3333 17.4665 14.1333 18.1332 14.5333ZM23.3332 6.93334L25.8665 12H20.7998L23.3332 6.93334ZM8.6665 2.66667C5.33317 2.66667 2.6665 5.33334 2.6665 8.66667C2.6665 12 5.33317 14.6667 8.6665 14.6667C11.9998 14.6667 14.6665 12 14.6665 8.66667C14.6665 5.33334 11.9998 2.66667 8.6665 2.66667ZM8.6665 12C6.79984 12 5.33317 10.5333 5.33317 8.66667C5.33317 6.80001 6.79984 5.33334 8.6665 5.33334C10.5332 5.33334 11.9998 6.80001 11.9998 8.66667C11.9998 10.5333 10.5332 12 8.6665 12ZM14.2665 17.7333C13.7332 17.2 12.9332 17.2 12.3998 17.7333L8.6665 21.4667L4.93317 17.7333C4.39984 17.2 3.59984 17.2 3.0665 17.7333C2.53317 18.2667 2.53317 19.0667 3.0665 19.6L6.79984 23.3333L3.0665 27.0667C2.53317 27.6 2.53317 28.4 3.0665 28.9333C3.59984 29.4667 4.39984 29.4667 4.93317 28.9333L8.6665 25.2L12.3998 28.9333C12.9332 29.4667 13.7332 29.4667 14.2665 28.9333C14.7998 28.4 14.7998 27.6 14.2665 27.0667L10.5332 23.3333L14.2665 19.6C14.7998 19.0667 14.7998 18.2667 14.2665 17.7333ZM27.9998 17.3333H18.6665C17.8665 17.3333 17.3332 17.8667 17.3332 18.6667V28C17.3332 28.8 17.8665 29.3333 18.6665 29.3333H27.9998C28.7998 29.3333 29.3332 28.8 29.3332 28V18.6667C29.3332 17.8667 28.7998 17.3333 27.9998 17.3333ZM26.6665 26.6667H19.9998V20H26.6665V26.6667Z" fill="currentColor"></path>
          </svg>
        </span>
        <h3 class="mb-4 text-xl md:text-2xl font-black font-heading tracking-tight text-black">FREQUENT
          AUTHENTICATION</h3>
        <p class="text-gray-500 leading-relaxed max-w-sm mx-auto lg:px-12 font-medium">
          Take care to develop resources continually and integrity them with previous projects.</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 #137

Tailwind CSS

NEUB

<section class="py-20 bg-pink-500">
    <div class="container px-4 mx-auto text-center">
        <div class="max-w-lg lg:max-w-4xl mx-auto mb-16 lg:mb-24">
            <span class="inline-block px-4 py-2 bg-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 mb-12 font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
                <a class="inline-block" href="#">
                    <div class="inline-block px-6 py-4 bg-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]">
                        DOWNLOAD
                    </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]">
                        LEARN MORE
                    </div>
                </a>
            </div>
        </div>
        <div class="px-5">
            <div class="relative w-full max-w-3xl mx-auto">
                <div class="absolute inset-0 bg-yellow-300 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

Tailwind Component #138

Tailwind CSS

NEUB

<section class="py-20" x-data="{ tab: 1 }">
    <div class="container px-4 mx-auto">
        <div class="flex flex-wrap -mx-4">
            <div class="w-full xl:w-1/3 px-4 mb-12 xl:mb-0">
                <ul class="flex flex-wrap flex-col sm:flex-row xl:flex-col gap-3">
                    <li><a x-on:click.prevent="tab=1" class="block px-6 py-6 text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" :class="{ 'bg-pink-500 text-white': tab==1, 'bg-white text-black hover:bg-yellow-300': tab!=1 }" href="#">LOREM IPSUM</a></li>
                    <li><a x-on:click.prevent="tab=2" class="block px-6 py-6 text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" :class="{ 'bg-pink-500 text-white': tab==2, 'bg-white text-black hover:bg-yellow-300': tab!=2 }" href="#">DOLOR SIT</a></li>
                    <li><a x-on:click.prevent="tab=3" class="block px-6 py-6 text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" :class="{ 'bg-pink-500 text-white': tab==3, 'bg-white text-black hover:bg-yellow-300': tab!=3 }" href="#">AMET CONSECTUTAR</a></li>
                    <li><a x-on:click.prevent="tab=4" class="block px-6 py-6 text-2xl font-black font-heading tracking-tighter border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[4px_4px_0px_0px_#000000]" :class="{ 'bg-pink-500 text-white': tab==4, 'bg-white text-black hover:bg-yellow-300': tab!=4 }" href="#">DOMOR AT ELIS</a></li>
                </ul>
            </div>
            <div class="w-full xl:w-2/3 px-4">
                <div class="flex flex-wrap -m-4">
                    <div class="w-full lg:w-1/3 p-4">
                        <div class="relative">
                            <div class="absolute inset-0 bg-yellow-300 translate-x-3 translate-y-3 border-4 border-black">
                            </div>
                            <img class="relative w-full h-96 object-cover border-4 border-black bg-white" src="https://images.unsplash.com/photo-1690228254548-31ef53e40cd1?q=80&amp;w=871&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                            <div class="absolute -bottom-1 -right-1 w-12 h-12 bg-pink-500 border-4 border-black"></div>
                        </div>
                    </div>
                    <div class="w-full lg:w-2/3 p-4">
                        <div class="relative">
                            <div class="absolute inset-0 bg-pink-500 translate-x-3 translate-y-3 border-4 border-black">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #139

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

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

Tailwind Component #140

Tailwind CSS

NEUB

<section class="py-20">
    <div class="container px-4 mx-auto">
        <div class="max-w-3xl mx-auto mb-12 lg:mb-16 text-center">
            <span class="inline-block px-4 py-2 bg-black text-white font-bold text-sm tracking-wider uppercase">LOREM IPSUM</span>
            <h2 class="mt-8 mb-8 text-5xl sm:text-6xl lg:text-7xl leading-tight font-black font-heading tracking-tight text-black">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
            <p class="text-lg sm:text-xl lg:text-2xl leading-tight text-gray-700 font-medium max-w-xl md:max-w-2xl mx-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
        <div class="flex flex-wrap -m-4">
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <div class="relative bg-yellow-300 border-4 border-black py-12 px-6 shadow-[8px_8px_0px_0px_#000000]">
                    <div class="text-center">
                        <div class="relative inline-block mb-6">
                            <img class="w-20 h-20 mx-auto border-4 border-white object-cover" src="https://images.unsplash.com/photo-1627161684458-a62da52b51c3?q=80&amp;w=849&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
                            <div class="absolute -bottom-2 -right-2 w-6 h-6 bg-pink-500 border-2 border-white"></div>
                        </div>
                        <h3 class="mb-2 text-2xl font-black font-heading tracking-tighter">Danny Bailey
                        </h3>
                        <p class="text-lg text-white font-bold">CEO &amp; Founder</p>
                    </div>
                </div>
            </div>
            <div class="w-full md:w-1/2 lg:w-1/3 p-4">
                <div class="relative bg-pink-500 border-4 border-black py-12 px-6 shadow-[8px_8px_0px_0px_#000000]">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Get the code for 13,400+ components

Trusted by Industry Leaders Logo Strip with Pink CTA

Tailwind Component #122

Get the code for 13,400+ components

Tailwind Component #123

Get the code for 13,400+ components

Tailwind Component #124

Get the code for 13,400+ components

Tailwind Component #125

Get the code for 13,400+ components

Tailwind Component #126

Get the code for 13,400+ components

Tailwind Component #127

Get the code for 13,400+ components

Tailwind Component #128

Get the code for 13,400+ components

Contact Section with Address and Phone Cards and Map

Tailwind Component #129

Get the code for 13,400+ components

Tailwind Component #130

Get the code for 13,400+ components

Tailwind Component #131

Get the code for 13,400+ components

Tailwind Component #132

Get the code for 13,400+ components

Tailwind Component #133

Get the code for 13,400+ components

Tailwind Component #134

Get the code for 13,400+ components

Tailwind Component #135

Get the code for 13,400+ components

Tailwind Component #136

Get the code for 13,400+ components

Tailwind Component #137

Get the code for 13,400+ components

Tailwind Component #138

Get the code for 13,400+ components

Tailwind Component #139

Get the code for 13,400+ components

Tailwind Component #140

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