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:
$@(\/)(\/)¥

1 year ago

7.8k
Hero

Author:
Aman kumar

2 years ago

7.2k
home page

Author:
Omer fils ELENGA

1 month ago

475
Animated Title
App Logo or Main Title

Author:
khalidrootdevs

2 years ago

7.1k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

5k
Header with svg background

Author:
R.P Ketan

3 years ago

13.6k
Yvette
it's very good

Author:
Umutoniwase Yvette

9 months ago

801
yvette
is good

Author:
Umutoniwase Yvette

9 months ago

744
Header and footer with Doodle design with Tailwind CSS
Creative responsive header and footer with doodle patterns built with Tailwind CSS. Features animated SVG doodles, interactive CTA buttons, and Fully customizable components for web projects

Author:
Homayoun

3 months ago

125
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

9 months ago

1.7k
Active Beauty Main Page

Author:
Maxim

11 months ago

1.2k
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

1 month ago

69

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components