Header

This tailwind example is contributed by Morris Muriuki Muthigani, on 25-Jul-2025. Component is made with Tailwind v3.4. It is responsive.

Header

Author Morris Muriuki Muthigani

Tailwind v3.4 971 3

Fork Fullscreen

<section class="relative pt-2 lg:pt-2">
    <div class="mx-auto w-full px-5 sm:px-10 md:px-12 lg:px-5 flex flex-col lg:flex-row gap-10 lg:gap-12">
      <div class="absolute w-full lg:w-1/2 inset-y-0 lg:right-0 hidden lg:block">
        <span class="absolute -left-6 md:left-4 top-24 lg:top-28 w-24 h-24 rotate-90 skew-x-12 rounded-3xl bg-rose-400 blur-xl opacity-60 lg:opacity-95 lg:block hidden"></span><span class="absolute right-4 bottom-12 w-24 h-24 rounded-3xl bg-red-600 blur-xl opacity-80"></span>
      </div>
      <span class="w-4/12 lg:w-2/12 aspect-square bg-gradient-to-tr from-red-600 to-red-400 absolute -top-5 lg:left-0 rounded-full skew-y-12 blur-2xl opacity-40 skew-x-12 rotate-90"></span>
      <div
        class="relative flex flex-col items-center text-center lg:text-left lg:py-7 xl:py-8 lg:items-start lg:max-w-none max-w-3xl mx-auto lg:mx-0 lg:flex-1 lg:w-1/2">
        <p class="mb-8 text-gray-700 font-extrabold">WELCOME TO KIKIMO DEV</p>
        <h1 class="text-3xl leading-tight sm:text-4xl md:text-5xl xl:text-6xl font-extrabold text-gray-900">Better Your
          Skills
          <span class="text-transparent bg-clip-text bg-gradient-to-br from-rose-600 from-20% via-rose-600 via-30% to-red-600">For a Better </span>World.
        </h1>
        <p class="mt-8 text-gray-700">We specialize in web design, graphic design, digital marketing, as well as app and
          software development.</p>
        <div class="mt-10 w-full flex max-w-md mx-auto lg:mx-0">
          <div class="flex sm:flex-row flex-col gap-5 w-full">
            <form
              class="py-1 pl-6 w-full pr-1 flex gap-3 items-center text-gray-600 shadow-lg shadow-gray-200/20 border border-gray-200 bg-gray-100 rounded-full ease-linear focus-within:bg-white focus-within:border-blue-600">
              <span class="min-w-max pr-2 border-r border-gray-200"><svg xmlns="http://www.w3.org/2000/svg" width="20" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"></path></svg></span><input type="email" required="" placeholder="muriuki119@gmail.com" class="w-full py-3 outline-none bg-transparent" value=""><button type="submit" class="flex text-white justify-center items-center w-max min-w-max sm:w-max px-6 h-12 rounded-full outline-none relative overflow-hidden border duration-300 ease-linear after:absolute after:inset-x-0 after:aspect-square after:scale-0 after:opacity-70 after:origin-center after:duration-300 after:ease-linear after:rounded-full after:top-0 after:left-0 after:bg-[#172554] hover:after:opacity-100 hover:after:scale-[2.5] bg-rose-600 border-transparent hover:border-[#172554]"><span class="hidden sm:flex relative z-[5]">Get Started</span><span class="flex sm:hidden relative z-[5]"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"></path></svg></span></button>
            </form>
          </div>
        </div>
      </div>
      <div class="flex flex-1 lg:w-1/2 lg:h-auto relative lg:max-w-none lg:mx-0 mx-auto max-w-3xl"><img src="https://kikimodev.com/static/media/bgheader.5609055ae782da0be362.webp" alt="" width="2350" height="2359" class="lg:absolute lg:w-full lg:h-full rounded-3xl object-cover lg:max-h-none max-h-96">
      </div>
    </div>
  </section>

Related Examples

Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

ABDO-SY

1 year ago

3.7k
Animated Title
App Logo or Main Title

khalidrootdevs

2 years ago

7.6k
header

alex_bel

2 years ago

4.5k
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

nii fanny

1 year ago

1.3k
SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu
SaaS dashboard navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

225
Header with logo, menu and buttons
Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

Mike Varen

2 years ago

4.9k
Heade With Hero Section

Abdul Baset Bappy

1 year ago

1.9k
Responsive Navbar with search profile options

Rajesh Maheshwari

1 year ago

2.7k
Title

Morris Muriuki Muthigani

1 year ago

1.5k
Avant & Après
Avant & Après

Omer fils ELENGA

10 months ago

925
Responsive Navbar
Tailwind Navbar

Md. Tofayel islam

2 years ago

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

Nicole Shalom

1 year ago

2.2k