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

112

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.7k
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

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

1 year ago

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

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

11 months ago

1.3k
Active Beauty Main Page

Author:
Maxim

10 months ago

1.1k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

8 months ago

827
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

8 months ago

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

8 months ago

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

7 months ago

1.5k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Author:
Homayoun

1 month ago

429
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

1 month ago

211
Default Tailwind Footer
Use this example of a footer section divided in five columns with brand logo, desciption, sitemap links and social media accounts.

Author:
Pagedone

1 year ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components