Animated Ripple Avatar

Ripple Effect Avatar (Tailwind CSS Component)
A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

This tailwind example is contributed by Code Master(Mfuranziza Dusabe Hamza), on 22-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are 404 Pages, Not found,find

Card Error Page Search Bar Other

Author Code Master(Mfuranziza Dusabe Hamza)

Tailwind v3.4 2k 34

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Acode Master - Animation Features</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

@layer components {
      @keyframes ripple {
        0% { transform: scale(1); opacity: 0.4; }
        100% { transform: scale(2.5); opacity: 0; }
      }

@keyframes colorChange {
        0%, 100% {
          background-color: #3b82f6; /* blue-500 */
          border-color: #3b82f6;
          outline-color: #3b82f6;
          box-shadow: 0 4px 10px rgba(59, 130, 246, 0.7);
        }
        50% {
          background-color: #ef4444; /* red-500 */
          border-color: #ef4444;
          outline-color: #ef4444;
          box-shadow: 0 4px 10px rgba(239, 68, 68, 0.7);
        }
      }

@keyframes imageFade {
        0%, 33% {
          opacity: 1;
          background-image: url('https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d');
        }
        34%, 66% {
          opacity: 0;
          background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb');
        }
        67%, 100% {
          opacity: 1;
          background-image: url('https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e');
        }
      }

.animate-ripple {
        animation: ripple 4s linear infinite;
      }

.animate-colorChange {
        animation: colorChange 6s ease-in-out infinite;
      }

.animate-imageFade {
        animation: imageFade 12s ease-in-out infinite;
        background-size: cover;
        background-position: center;
      }
    }
  </style>
</head>
<body class="bg-gray-200 dark:bg-black text-gray-900 dark:text-gray-100 font-sans">

<nav class="fixed top-0 left-0 w-full bg-white dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 backdrop-blur-md shadow z-50">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
      <a href="#home" class="text-2xl font-bold text-blue-600 dark:text-blue-400">Acode Master</a>
      <div class="space-x-6">
        <a href="#home" class="hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a>
        <a href="#about" class="hover:text-blue-600 dark:hover:text-blue-400 transition">About</a>
        <a href="#features" class="hover:text-blue-600 dark:hover:text-blue-400 transition">Features</a>
        <a href="#contact" class="hover:text-blue-600 dark:hover:text-blue-400 transition">Contact</a>
      </div>
    </div>
  </nav>

<section id="home" class="w-full h-screen relative pt-20 flex items-center justify-center overflow-hidden">
    <div class="absolute inset-0 flex items-center justify-center">

<div
        class="absolute rounded-full z-10 w-[180px] h-[180px] border border-solid border-blue-300 outline outline-offset-2 outline-blue-300 shadow-xl animate-imageFade">
      </div>

<div class="absolute rounded-full border border-solid shadow-xl w-[250px] h-[250px] opacity-20 animate-ripple animate-colorChange"></div>
      <div class="absolute rounded-full border border-solid shadow-xl w-[320px] h-[320px] opacity-15 animate-ripple animate-colorChange"></div>
      <div class="absolute rounded-full border border-solid shadow-xl w-[390px] h-[390px] opacity-10 animate-ripple animate-colorChange"></div>
      <div class="absolute rounded-full border border-solid shadow-xl w-[460px] h-[460px] opacity-8 animate-ripple animate-colorChange"></div>
      <div class="absolute rounded-full border border-solid shadow-xl w-[530px] h-[530px] opacity-5 animate-ripple animate-colorChange"></div>
      <div class="absolute rounded-full border border-solid shadow-xl w-[600px] h-[600px] opacity-2 animate-ripple animate-colorChange"></div>

</div>
    <div class="relative z-20 text-center max-w-3xl px-4">
      <h1 class="text-5xl font-extrabold mb-4">Welcome to Acode Master</h1>
      <p class="text-lg md:text-xl text-gray-700 dark:text-gray-300">
        Discover the power of modern web animations and design crafted with Tailwind CSS. Acode Master delivers beautiful, dynamic UI experiences that captivate users.
      </p>
    </div>
  </section>

<section id="about" class="max-w-5xl mx-auto px-6 py-20">
    <h2 class="text-4xl font-bold mb-6 text-center text-blue-600 dark:text-blue-400">About Acode Master</h2>
    <p class="text-lg leading-relaxed text-center max-w-3xl mx-auto">
      Acode Master is your go-to developer and designer for clean, efficient, and innovative web solutions. 
      Passionate about combining the latest technologies like Tailwind CSS and modern animation techniques, Acode Master brings ideas to life with creativity and precision.
    </p>
  </section>

<section id="features" class="bg-white dark:bg-gray-900 py-20">
    <div class="max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-12">
      <div class="text-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition">
        <div class="mb-4 text-blue-600 dark:text-blue-400">
          
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6h13M9 6L3 12l6 6" />
          </svg>
        </div>
        <h3 class="text-2xl font-semibold mb-2">Dynamic Animations</h3>
        <p class="text-gray-700 dark:text-gray-300">
          Eye-catching ripple and color animations built purely with Tailwind CSS for modern UI/UX.
        </p>
      </div>

<div class="text-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition">
        <div class="mb-4 text-blue-600 dark:text-blue-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="text-2xl font-semibold mb-2">Image Transitions</h3>
        <p class="text-gray-700 dark:text-gray-300">
          Smooth fading image backgrounds to keep your website lively and engaging.
        </p>
      </div>

<div class="text-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition">
        <div class="mb-4 text-blue-600 dark:text-blue-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
          </svg>
        </div>
        <h3 class="text-2xl font-semibold mb-2">Tailwind CSS Only</h3>
        <p class="text-gray-700 dark:text-gray-300">
          All animations and styling done purely with Tailwind CSS utilities and custom components — no extra JS required.
        </p>
      </div>
    </div>
  </section>

<section id="contact" class="max-w-4xl mx-auto px-6 py-20 text-center">
    <h2 class="text-4xl font-bold mb-6 text-blue-600 dark:text-blue-400">Get in Touch</h2>
    <p class="mb-8 text-lg">
      Have questions or

Related Examples

cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.1k
Payment Cards

Shammi Nethupul

2 years ago

3k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

1.9k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.3k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k
Active Beauty Main Page

Maxim

1 year ago

1.8k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Hamza Atig

1 year ago

1.6k