header

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

Header

Author alex_bel

Tailwind v3.4 4.6k 7

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

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

2 years ago

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

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

2 years ago

9.8k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

10 months ago

669
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
vanessa
nice

Umutoniwase Yvette

1 year ago

1.1k
sticky headings
sticky headings

Anonymous

2 years ago

6.6k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

10 months ago

1.1k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Admin portal landing page

Srreyashi DeyChakii

2 years ago

4.6k
Job Platfoam
If you need a Job You will Have to Apply for it

soft mind

1 year ago

1.7k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1.1k
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

8.6k