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
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

8 months ago

455
NFT Header with Hero

Author:
Abdul Baset Bappy

7 months ago

1.1k
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9.1k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 year ago

2.2k
Artisan Coffee Crafted with Care
Coffee is one of the world's most beloved beverages, enjoyed by millions daily. Here's an in-depth look at everything coffee-related.

Author:
matoleo chance

8 months ago

860
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

5k
Real Estate Website • Hero Section
polished, professional Hero section

Author:
UI-Templates

3 months ago

449
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.8k
Header

Author:
Morris Muriuki Muthigani

6 months ago

515
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.3k
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

8 months ago

474

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components