Home
saim-t8
Tailwind css banner offer

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 CSS v3. It is responsive. It supports dark mode.

Header Card Banner Other

Author saim-t8

273

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