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.3k

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

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

1 year ago

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

3 weeks ago

27
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

3 weeks ago

138
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

4 months ago

1.3k
Coffee
custom

Author:
Rebecca IRANKUNDA

3 weeks ago

41
No one
nice

Author:
Umutoniwase Yvette

3 weeks ago

70
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

3 weeks ago

22
Yoga Coach Hero Section

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

1 year ago

4.7k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

2 weeks ago

130
Brutalist Hero

Author:
threehymns

6 months ago

1.7k
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

7 months ago

896
Creative Hero Section

Author:
Ijila Itunu

1 month ago

446

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components