Home
Conan Hilton
Black friday sale / deal banner

Black friday sale / deal banner

This tailwind example is contributed by Conan Hilton, on 13-Jun-2023. Component is made with Tailwind CSS v3.

9.6k

<section class="px-4">
    <div
        class="bg-gradient-to-br from-sky-400 via-sky-400 to-violet-400 p-6 sm:p-10 rounded-2xl w-full text-white flex items-center justify-between max-w-2xl mx-auto mt-20">
        <div class="flex flex-col gap-6">
            <div class="">
                <span class="text-gray-200">Black friday sale</span>
                <br>
                <span class="text-gray-200 text-4xl text-white font-semibold">20% off every Product</span>
            </div>
            <a href="" target="_blank" rel="noreferrer"
                class="text-black bg-white hover:bg-gray-50 px-4 py-2 rounded-lg w-fit  ease duration-300 flex gap-1 items-center group">
                <span>Buy now</span>
                <svg data-v-e660a7a7="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    aria-hidden="true" role="img"
                    class="group-hover:translate-x-1 transition-transform ease duration-200" width="1em" height="1em"
                    viewBox="0 0 256 256">
                    <path fill="currentColor"
                        d="m221.66 133.66l-72 72a8 8 0 0 1-11.32-11.32L196.69 136H40a8 8 0 0 1 0-16h156.69l-58.35-58.34a8 8 0 0 1 11.32-11.32l72 72a8 8 0 0 1 0 11.32Z">
                    </path>
                </svg>
            </a>
        </div>
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-gray-100" viewBox="0 0 15 15">
                <path fill="currentColor" fill-rule="evenodd"
                    d="M4.5 0A2.5 2.5 0 0 0 2 2.5v.286c0 .448.133.865.362 1.214H1.5A1.5 1.5 0 0 0 0 5.5v1A1.5 1.5 0 0 0 1.5 8H7V4h1v4h5.5A1.5 1.5 0 0 0 15 6.5v-1A1.5 1.5 0 0 0 13.5 4h-.862c.229-.349.362-.766.362-1.214V2.5A2.5 2.5 0 0 0 10.5 0c-1.273 0-2.388.68-3 1.696A3.498 3.498 0 0 0 4.5 0ZM8 4h2.786C11.456 4 12 3.456 12 2.786V2.5A1.5 1.5 0 0 0 10.5 1A2.5 2.5 0 0 0 8 3.5V4ZM7 4H4.214C3.544 4 3 3.456 3 2.786V2.5A1.5 1.5 0 0 1 4.5 1A2.5 2.5 0 0 1 7 3.5V4Z"
                    clip-rule="evenodd"></path>
                <path fill="currentColor" d="M7 9H1v3.5A2.5 2.5 0 0 0 3.5 15H7V9Zm1 6h3.5a2.5 2.5 0 0 0 2.5-2.5V9H8v6Z">
                </path>
            </svg>
        </div>
    </div>
</section>

Related Examples

Promotional notification
sticky bottom promotional banner

Author:
Laurits

2 years ago

9.6k
Promotional sticky top section

Author:
Leon Bachmann

2 years ago

11.5k
images

Author:
Maxim

1 year ago

2.7k
CTA banner
Capture the attention of the user with full-width CTA Section

Author:
Anonymous

1 year ago

3.9k
Internet Connection Check
A sleek and responsive Internet connection status checker built with Tailwind CSS and Alpine.js. This component provides real-time feedback about the user's internet connection status.

Author:
Maxim

4 months ago

930
cards
cards slices

Author:
Anonymous

1 year ago

6k
Banner for app download
Show App Download Buttons for the App Store and Play Store

Author:
Pixel Perfect

10 months ago

1.3k
Portfolio

Author:
Aitrik Saha

4 months ago

737
Food App Web design

Author:
Aitrik Saha

2 months ago

722
3D Animation Studio
3D animation is the process of creating three-dimensional products, objects, backgrounds, etc., and setting them in motion within a digital environment. It's commonly used for the web, social media marketing, product design, film, cartoons, commercials, and video games.

Author:
Nicole Shalom

1 week ago

60
Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Author:
Emdadul Islam

11 months ago

3.6k
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

56

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components