Promotional sticky top section

This tailwind example is contributed by Leon Bachmann, on 09-Dec-2022. Component is made with Tailwind v3.4. It is responsive.

Header Banner

Author Leon Bachmann

Tailwind v3.4 13.3k 15

Fork Fullscreen

<div class="fixed inset-x-0 top-0 z-50">
    <div class="bg-teal-600">
        <div class="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
            <div class="flex flex-col items-center justify-between lg:flex-row lg:justify-center">
                <div class="flex flex-1 items-center lg:mr-3 lg:flex-none">
                    <p class="ml-3 text-center font-medium text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                            stroke="currentColor" aria-hidden="true" class="mr-2 hidden h-6 w-6 lg:inline">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z">
                            </path>
                        </svg>To celebrate our
                        <<span class="font-semibold">Big Version 3</span> release, use
                        <span class="font-black">VERSION3</span> code to get <span class="font-black">50% off</span>
                    </p>
                </div>
                <div class="mt-2 w-full flex-shrink-0 lg:mt-0 lg:w-auto"><a
                        class="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-teal-600 shadow-sm hover:bg-teal-50"
                        href="#pricing">Buy now
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Promotional notification
sticky bottom promotional banner

Laurits

3 years ago

10.8k
page heaading stacked
yeah booy, oh booy, o buy

Anonymous

2 years ago

10.8k
Navigation Bar Responsive

SAI BENDE

2 years ago

11.2k
Black friday sale / deal banner

Conan Hilton

3 years ago

11.1k
cards
cards slices

Anonymous

2 years ago

7.6k
Full width header with gradient
Header component for showing Info.

TailwindFlex

4 years ago

14.1k
Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
Hero Section
A 2 column responsive hero section

Emdadul Islam

2 years ago

3.4k
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.

Nicole Shalom

1 year ago

2.2k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

saim-t8

1 year ago

1k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

228
Markert shop
wellcome tothe my online shoping

Umutoniwase Yvette

1 year ago

1.1k