Home
Bonimater
Scooby’s Hello – A Tailwind CSS Cartoon Animation

Scooby’s Hello – A Tailwind CSS Cartoon Animation

A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

This tailwind example is contributed by Bonimater, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Toast, Snackbar,Transitions

Hero Notification Animation

Author Bonimater

580

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scooby Animation Minimal</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes slideIn {
      0% { transform: translateX(-150%); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    }
    @keyframes tailWag {
      0%, 100% { transform: rotate(15deg); }
      50% { transform: rotate(-15deg); }
    }
    @keyframes bubbleFadeIn {
      0% { opacity: 0; transform: translateY(10px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .slide-in { animation: slideIn 2s ease forwards; opacity: 0; position: relative; }
    .tail-wag { animation: tailWag 0.6s ease-in-out infinite; transform-origin: left center; }
    .bubble-fade-in { animation: bubbleFadeIn 1s ease forwards; animation-delay: 2.2s; opacity: 0; }
    .speech-bubble::after {
      content: "";
      position: absolute;
      left: -10px; top: 50%; transform: translateY(-50%);
      border-width: 10px;
      border-style: solid;
      border-color: transparent #FEF3C7 transparent transparent;
    }
  </style>
</head>
<body class="flex items-left justify-center min-h-screen bg-gradient-to-tr from-indigo-200 via-purple-200 to-pink-200">

<div class="relative w-[120px] h-[80px] bg-[#A0522D] rounded-[40px_40px_30px_30px] shadow-lg">

<div class="tail-wag absolute top-8 -right-6 w-[30px] h-[10px] rounded-[20px] bg-[#8B4513]"></div>

<div class="absolute top-0 -left-10 w-[70px] h-[70px] bg-[#D2B48C] rounded-full border-4 border-[#8B4513] z-10">

<div class="absolute top-1 -left-4 w-5 h-10 bg-[#8B4513] rounded-md rotate-[-20deg] origin-bottom-left"></div>
        <div class="absolute top-1 left-4 w-5 h-10 bg-[#8B4513] rounded-md rotate-[20deg] origin-bottom-left"></div>

<div class="absolute top-5 left-4 w-3 h-3 bg-white rounded-full border-2 border-black">
          <div class="absolute top-1 left-1 w-1.5 h-1.5 bg-black rounded-full"></div>
        </div>

<div class="absolute top-11 left-6 w-4 h-2.5 bg-black rounded-[40%_40%_60%_60%]"></div>

</div>

<div class="speech-bubble bubble-fade-in relative bg-yellow-100 text-purple-700 font-semibold px-5 py-3 rounded-3xl text-xl select-none"
         style="font-family:'Comic Sans MS', cursive, sans-serif;">
      Hello!
    </div>

</div>

</body>
</html>

Related Examples

3D Animated Image Gallery
3D Animated Image Gallery

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

1 year ago

8.5k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

5.4k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

10 months ago

1.8k
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Author:
Vikas Kushwah

9 months ago

1.6k
Creative Hero Section

Author:
Ijila Itunu

7 months ago

1.3k
Modern page
hero page by salvator

Author:
Baraka Salvator

7 months ago

1k
chair
by salvator

Author:
Baraka Salvator

7 months ago

815
joker
joker cyber punk

Author:
Baraka Salvator

6 months ago

1.1k
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

4 months ago

575
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

10 months ago

1.6k
hero section

Author:
Anonymous

2 years ago

9.7k
Product hunt showcase

Author:
Lukas Müller

2 years ago

12.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components