Home
Leon Bachmann
Promotional sticky top section

Promotional sticky top section

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

Header Banner

Author Leon Bachmann

12.6k

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

Author:
Laurits

3 years ago

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

Author:
Anonymous

2 years ago

10.1k
Navigation Bar Responsive

Author:
SAI BENDE

2 years ago

10k
Black friday sale / deal banner

Author:
Conan Hilton

2 years ago

10.5k
cards
cards slices

Author:
Anonymous

2 years ago

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

Author:
TailwindFlex

3 years ago

13.3k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
Hero Section
A 2 column responsive hero section

Author:
Emdadul Islam

1 year ago

2.7k
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

7 months ago

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

Author:
saim-t8

4 months ago

456
Acode Master
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.3k
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components