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.8k
Yvette
it's very good

Umutoniwase Yvette

1 year ago

1.5k
home page

Omer fils ELENGA

8 months ago

972
yvette
is good

Umutoniwase Yvette

1 year ago

1.3k
home
html , css

Hacker Development

1 year ago

2.3k
Header + simple Hero Section

ABDO-SY

1 year ago

2.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.