Full width header with gradient

Header component for showing Info.

This tailwind example is contributed by TailwindFlex, on 01-Jul-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Header

Author TailwindFlex

Tailwind v3.4 14.2k 10

Fork Fullscreen

<div
    class="bg-gradient-to-r from-indigo-500 via-indigo-600 to-indigo-500 dark:from-gray-500 dark:via-gray-600 dark:to-gray-500 py-8 md:py-16">
    <div class="flex flex-col gap-3">

<img src="https://tailwindflex.com/public/images/profile/1.png" class="object-cover w-14 h-14 rounded-full m-auto" alt="User image" id="user_image">

<p class="text-3xl font-bold text-center text-white">
            TailwindFlex
        </p>

<p class="text-center text-gray-200">
            Free tailwind CSS components library
        </p>

<div class="flex justify-center max-w-sm gap-2 mx-auto">

<a href="#">
                <img src="https://tailwindflex.com/public/images/icons/github.svg" class="object-cover w-6 h-6  m-auto" title="github">
            </a>

<a href="#">
                <img src="https://tailwindflex.com/public/images/icons/linkedin.png" class="object-cover w-6 h-6  m-auto" title="linkedin">
            </a>

<a href="#">
                <img src="https://tailwindflex.com/public/images/icons/website.svg" class="object-cover w-6 h-6  m-auto" title="website">
            </a>

<a href="#">
                <img src="https://tailwindflex.com/public/images/icons/instagram.svg" class="object-cover w-6 h-6  m-auto" title="instagram">
            </a>

</div>
    </div>
</div>

Related Examples

About us section

Mr Robot

3 years ago

20.5k
CTA with image

Fagundo67

3 years ago

10.5k
Navigation Bar Responsive

SAI BENDE

2 years ago

11.2k
Promotional sticky top section

Leon Bachmann

3 years ago

13.3k
Header with svg background

R.P Ketan

3 years ago

14.3k
Hero section
Hero section for your project

Prajwal Hallale

4 years ago

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

Anonymous

2 years ago

10.9k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

2 years ago

5.2k
Hero Section
A 2 column responsive hero section

Emdadul Islam

2 years ago

3.4k
yvette
vibes kbx

Umutoniwase Yvette

1 year ago

1.2k
my website

Creative Solution

2 years ago

3.3k
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Mike Varen

2 years ago

4.9k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.