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

597

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.7k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

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

11 months ago

1.9k
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.8k
Creative Hero Section

Author:
Ijila Itunu

8 months ago

1.3k
Modern page
hero page by salvator

Author:
Baraka Salvator

8 months ago

1.2k
chair
by salvator

Author:
Baraka Salvator

8 months ago

844
joker
joker cyber punk

Author:
Baraka Salvator

7 months ago

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

Author:
SAI BENDE

5 months ago

621
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

3 weeks ago

40
use-scroll-effect
use-scroll-effect

Author:
Omer fils ELENGA

2 weeks ago

153
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

8 months ago

979

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components