Home
Homayoun
Header and footer with Doodle design with Tailwind CSS

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

This tailwind example is contributed by Homayoun, on 03-Dec-2025. Component is made with Tailwind CSS v3. It is responsive.

Footer Header

Author Homayoun

Fork Fullscreen

<div
    class="max-w-6xl mx-auto flex justify-between items-center relative z-10"
  >
    <div>
      <h1 class="text-2xl md:text-3xl font-bold relative inline-block">
        <span class="relative z-10">Snapp Text</span>
        <svg
          class="absolute -bottom-2 left-0 w-full"
          height="8"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M 0 4 Q 25 2, 50 4 T 100 4"
            stroke="#ef4444"
            strokeWidth="3"
            fill="none"
            strokeLinecap="round"
          />
        </svg>
      </h1>
      <p class="text-gray-700 hidden md:block mt-3 font-medium">
        Quick snippets, instant copy ✨
      </p>
    </div>
    <button
      class="bg-white hover:bg-red-50 text-gray-900 px-2 sm:px-4 py-1 sm:py-2 cursor-pointer rounded-2xl flex items-center gap-2 transition-all hover:scale-105 hover:rotate-1 font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] border-3 border-black relative group"
    >
      Add Item
      <svg
        class="absolute -top-2 -right-2 w-6 h-6"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="12"
          cy="12"
          r="8"
          fill="#fbbf24"
          stroke="#000"
          stroke-width="2"
        ></circle>
        <path
          d="M 8 12 L 12 8 L 16 12"
          stroke="#000"
          stroke-width="2"
          fill="none"
        ></path>
      </svg>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="w-4 h-4 group-hover:rotate-90 transition-transform"
        aria-hidden="true"
      >
        <path d="M5 12h14"></path>
        <path d="M12 5v14"></path>
      </svg>
    </button>
  </div>

<div class="absolute top-0 left-0 right-0">
    <svg
      width="100%"
      height="20"
      xmlns="http://www.w3.org/2000/svg"
      preserveAspectRatio="none"
    >
      <path
        d="M 0 10 Q 250 20, 500 10 T 1000 10 T 1500 10 T 2000 10 L 2000 0 L 0 0 Z"
        fill="#e9d5ff"
      />
    </svg>
  </div>
  <div class="max-w-6xl mx-auto relative z-10">
    <p class="flex flex-wrap md:flex-nowrap justify-center items-center gap-2.5 font-bold text-lg">
      Created by
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="w-5 h-5 fill-red-500 text-red-500 animate-pulse"
        aria-hidden="true"
      >
        <path
          d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
        ></path>
      </svg>
      See more in my
      <a
        href="https://github.com/homayunmmdy"
        title="github"
        class="inline-flex items-center justify-center bg-white hover:bg-yellow-50 p-2 rounded-full transition-all hover:scale-110 hover:rotate-12 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] border-2 border-black"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="w-5 h-5"
          aria-hidden="true"
        >
          <path
            d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
          ></path>
          <path d="M9 18c-4.51 2-5-2-7-2"></path>
        </svg>
      </a>
    </p>

Related Examples

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

Author:
ABDESLAMI ACHRAF

1 year ago

3.6k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

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

11 months ago

2k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

10 months ago

1.1k
Active Beauty Main Page

Author:
Maxim

8 months ago

1.1k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

7 months ago

758
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

7 months ago

927
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

7 months ago

1.1k
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

6 months ago

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

Author:
Coastal UI

1 year ago

1.7k
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

5.1k
Minimalist iOS 26 Foote
Minimalist iOS 26 Foote

Author:
Omer fils ELENGA

1 month ago

35

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components