Tailwind css banner offer

Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

This tailwind example is contributed by saim-t8, on 27-Aug-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Header Card Banner Other

Author saim-t8

Tailwind v3.4 1k 4

Fork Fullscreen

<div class="relative bg-[#ffde59] dark:bg-black border-4 border-black dark:border-white p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] transform hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[4px_4px_0px_0px_rgba(255,255,255,1)] transition-all">
  <div class="absolute -top-3 -right-3 w-8 h-8 bg-[#ff5c5c] dark:bg-violet border-2 border-black dark:border-white"></div>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <div class="w-12 h-12 bg-violet dark:bg-[#ff5c5c] border-2 border-black dark:border-white flex items-center justify-center mr-4">
        <span class="text-white dark:text-black font-black text-xl">%</span>
      </div>
      <div>
        <h3 class="text-xl font-black text-black dark:text-white uppercase tracking-tight">LIMITED TIME OFFER</h3>
        <p class="text-black dark:text-gray-300 font-bold text-sm">Save 70% on all premium templates</p>
      </div>
    </div>
    <a href="https://templateight.com/components/banner" 
       target="_blank"
       class="bg-black dark:bg-white text-[#ffde59] dark:text-black font-black px-6 py-3 border-2 border-black dark:border-white shadow-[4px_4px_0px_0px_rgba(0,0,0,0.3)] dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.3)] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,0.3)] dark:hover:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.3)] transition-all uppercase tracking-wide inline-block">
      See More
    </a>
  </div>
</div>

Related Examples

Promotional sticky top section

Leon Bachmann

3 years ago

13.3k
cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
sticky headings
sticky headings

Anonymous

2 years ago

6.6k
cards
cards slices

Anonymous

2 years ago

7.6k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

4.1k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Thankyou Card

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.5k
Hero Section
A 2 column responsive hero section

Emdadul Islam

2 years ago

3.4k
Grid
Grid Grid-Cards

sardorazimov2901

2 years ago

2.4k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.1k