Home
alex_bel
header

header

This tailwind example is contributed by alex_bel, on 04-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Header

Author alex_bel

3.9k

Fork Fullscreen

<header class="h-48 border-t-2 bg-cover md:h-auto" style="background-image: url('https://www.autoscout24.de/assets/as24-home/images/brandboxes/de-DE/brand_campaign/size_xl.png.webp');">
  <div class="max-w-[60rem] mx-auto px-6 py-2">
    <div class="mt-20">
      <div class="items-center justify-between md:flex">
        <div class="mr-auto hidden w-full md:block md:w-1/2" style="text-shadow: 0 20px 50px hsla(0,0%,0%,8);">
          <h1 class="text-4xl font-bold tracking-wide text-white">Brand</h1>
          <h2 class="text-2xl font-bold tracking-wide text-white">Welcome <span class="text-gray-800"> Aboard</span></h2>
          <p class="text-gray-300">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span class="text-white">Create New Account?<a class="ml-2 text-lg font-bold text-gray-900" target="_blank">Sign Up</a></span>
        </div>
        <div class="mt-6 w-full md:max-w-md">
          <div class="card mb-6 rounded-lg bg-white px-4 py-4 shadow-md">
            <form action="#">
              <div class="flex items-center justify-center">
                <h2 class="text-2xl font-bold tracking-wide">Welcome back</h2>
              </div>
              <h2 class="mb-2 text-center text-xl font-semibold text-gray-800">Sign In</h2>
              <input type="text" class="mb-6 w-full rounded border border-gray-400 bg-gray-200 px-4 py-1 text-gray-700 placeholder-gray-700 focus:bg-white focus:outline-none" placeholder="Email Address" />
              <input type="password" class="mb-4 w-full rounded border border-gray-400 bg-gray-200 px-4 py-1 text-gray-700 placeholder-gray-700 focus:bg-white focus:outline-none" placeholder="Password" />
              <div class="flex items-center justify-between">
                <a class="text-gray-600" target="_blank">Forget Password?</a>
                <button class="rounded bg-gray-800 px-2 py-1 text-gray-200">Sign In</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

Related Examples

Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

2 years ago

7.9k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Author:
Ele Eriksen

9 months ago

545
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

2 years ago

7.1k
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

1 year ago

2.2k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

9 months ago

1.2k
Shrinkable Header
A shrinkable header with responsive menu using a little bit of plain javascript

Author:
farid

1 year ago

1.6k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

8.9k
Tailwind Header
responsive mobile menu with a smooth transition

Author:
Anonymous

1 year ago

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

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.4k
Navbar
Navbar

Author:
TakaMorY

7 months ago

546
Movies are a popular form
Movies are a popular form of entertainment that combine storytelling, visuals, and sound to create immersive experiences. They can be fictional or based on real events, spanning genres like action, comedy, drama, horror, sci-fi, romance, and more. Here’s a quick overview:

Author:
nii fanny

9 months ago

773
Hero Section
Hero section design concept

Author:
Raul antonio de la cruz hernandez

3 months ago

296

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components