Header

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

Header

Author Morris Muriuki Muthigani

359

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

Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Author:
Rathanak Phan

4 months ago

471
yvette
vibes kbx

Author:
Umutoniwase Yvette

4 months ago

301
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

4 months ago

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

Author:
Augustin

4 months ago

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

Author:
Coastal UI

11 months ago

1.4k
Header + simple Hero Section

Author:
ABDO-SY

8 months ago

1.6k
Yvette
it's very good

Author:
Umutoniwase Yvette

4 months ago

453
Yoga Coach Hero Section

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

1 year ago

5.4k
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.3k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.3k
sticky headings
sticky headings

Author:
Anonymous

1 year ago

5.9k
App Hero Section With header

Author:
Abdul Baset Bappy

3 months ago

684

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components