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

Ayyamperumal S

1 year ago

3.2k
MyWebsite
Create a professional website for free with the Website.com website builder. Domain names, web hosting, website templates, and ecommerce solutions included.

Augustin

1 year ago

1.2k
Animated Title
App Logo or Main Title

khalidrootdevs

2 years ago

7.6k
Sticky Changelog

Michael Andreuzza

2 years ago

3.2k
Movies are a popular form
Movies are a popular form of entertainment that combine storytelling, visuals, and sound to create immersive experiences. They can be fictional or based on real events, spanning genres like action, comedy, drama, horror, sci-fi, romance, and more. Here’s a quick overview:

nii fanny

1 year ago

1.2k
Yoga Coach Hero Section

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

2 years ago

6.7k
Coffee
custom

Rebecca IRANKUNDA

1 year ago

1.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.4k
Creative Hero Section

Ijila Itunu

1 year ago

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

Homayoun

10 months ago

405
Acode Master - FB & WhatsApp UI Combo
Description (meta description) ni tag ikoreshwa mu mutwe (head) wa HTML igaragaza mu ncamake icyo urubuga cyangwa urupapuro rwawe ruvuga. Iyi description ikoreshwa cyane na search engines (nka Google) mu kwerekana summary y’urubuga mu bisubizo by’ubushakashatsi.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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