Animated Services Cards Using Tailwind CSS with Hover Effects

Mycodingtutorial October 11, 2026 14 min read 0 Comments

Create modern and responsive Animated Services Cards Using HTML, Tailwind CSS, and JavaScript. In this tutorial, you will learn how to build a professional services section with a dark background, gradient text, colorful icons, and interactive hover effects.

This design features six unique service cards for UI/UX Design, Web Development, WordPress, SEO Optimization, Digital Marketing, and Speed Optimization. Each card includes animated gradient borders, a mouse-following spotlight effect, glowing icons, smooth transitions, and scroll reveal animations.

The layout is fully responsive and adapts to desktop, tablet, and mobile screens using Tailwind CSS utility classes. Custom CSS powers the advanced animations, while JavaScript handles mouse interactions and scroll-based visibility effects.

Whether you are building a portfolio, agency website, business landing page, or services page, this modern UI design provides an attractive starting point for your next web development project.

Features of Animated Services Cards Using Tailwind CSS

Features included:

Responsive grid layout using Tailwind CSS
Six modern service cards with icons and descriptions
Animated gradient borders on hover
Mouse-following spotlight effect
Glowing icons and interactive hover animations
Scroll reveal entrance animations
Gradient heading and dark UI design
Font Awesome icons
Call-to-action section
Reduced-motion accessibility support

Follow this tutorial to customize the colors, icons, text, and animation effects to match your website design.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Services Cards Code By Mycodingtutorial</title>

  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body class="text-white antialiased">

  <section class="services-bg relative overflow-hidden px-5 py-20 sm:px-8 sm:py-24 lg:py-28">

    <div class="relative mx-auto max-w-7xl">

      <!-- Heading -->
      <div class="reveal mb-14 text-center">
        <div class="mb-5 inline-flex items-center gap-3 rounded-full border border-violet-400/20 bg-violet-400/[0.07] px-4 py-2">
          <span class="eyebrow-dot h-2 w-2 rounded-full bg-violet-400"></span>
          <span class="text-[11px] font-bold uppercase tracking-[.22em] text-violet-200">
            Our Expertise
          </span>
        </div>

        <h1 class="text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl lg:text-6xl">
          Solutions Built for
          <span class="heading-gradient">Your Success.</span>
        </h1>

        <p class="mx-auto mt-5 max-w-2xl text-sm leading-7 text-slate-400 sm:text-base">
          We combine creative thinking, modern technology, and
          strategic expertise to transform your ideas into reality.
        </p>
      </div>

      <!-- Cards -->
      <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">

        <!-- UI/UX Design -->
        <article class="service-card reveal p-7 sm:p-8"
          style="--accent:#a78bfa;--accent2:#6366f1">
          <div class="flex items-start justify-between">
            <div class="icon-box"><i class="fa-solid fa-pen-ruler"></i></div>
            <span class="service-number">01</span>
          </div>

          <div class="mt-8">
            <span class="text-[10px] font-bold uppercase tracking-[.2em] text-violet-300">Creative Studio</span>
            <h2 class="mt-3 text-2xl font-bold tracking-tight">UI/UX Design</h2>
            <p class="mt-4 text-sm leading-7 text-slate-400">
              Create intuitive digital experiences with stunning visuals,
              thoughtful interactions, and user-focused design.
            </p>
          </div>

          <div class="my-6 h-px bg-white/[0.07]"></div>

          <div class="flex flex-wrap gap-2">
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Wireframes</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Prototypes</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Visual Design</span>
          </div>

          <a href="#contact" class="service-link mt-7">
            Explore Service <i class="fa-solid fa-arrow-right"></i>
          </a>
        </article>

        <!-- Web Development -->
        <article class="service-card reveal p-7 sm:p-8"
          style="--accent:#60a5fa;--accent2:#22d3ee">
          <div class="flex items-start justify-between">
            <div class="icon-box"><i class="fa-solid fa-code"></i></div>
            <span class="service-number">02</span>
          </div>

          <div class="mt-8">
            <span class="text-[10px] font-bold uppercase tracking-[.2em] text-blue-300">Engineering</span>
            <h2 class="mt-3 text-2xl font-bold tracking-tight">Web Development</h2>
            <p class="mt-4 text-sm leading-7 text-slate-400">
              Build fast, accessible, and scalable websites that
              turn visitors into customers.
            </p>
          </div>

          <div class="my-6 h-px bg-white/[0.07]"></div>

          <div class="flex flex-wrap gap-2">
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">HTML & CSS</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">JavaScript</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Performance</span>
          </div>

          <a href="#contact" class="service-link mt-7">
            Explore Service <i class="fa-solid fa-arrow-right"></i>
          </a>
        </article>

        <!-- WordPress -->
        <article class="service-card reveal p-7 sm:p-8"
          style="--accent:#34d399;--accent2:#2dd4bf">
          <div class="flex items-start justify-between">
            <div class="icon-box"><i class="fa-brands fa-wordpress"></i></div>
            <span class="service-number">03</span>
          </div>

          <div class="mt-8">
            <span class="text-[10px] font-bold uppercase tracking-[.2em] text-emerald-300">CMS Solutions</span>
            <h2 class="mt-3 text-2xl font-bold tracking-tight">WordPress</h2>
            <p class="mt-4 text-sm leading-7 text-slate-400">
              Flexible WordPress websites with custom themes,
              powerful plugins, and easy content management.
            </p>
          </div>

          <div class="my-6 h-px bg-white/[0.07]"></div>

          <div class="flex flex-wrap gap-2">
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Custom Themes</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Plugins</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">WooCommerce</span>
          </div>

          <a href="#contact" class="service-link mt-7">
            Explore Service <i class="fa-solid fa-arrow-right"></i>
          </a>
        </article>

        <!-- SEO -->
        <article class="service-card reveal p-7 sm:p-8"
          style="--accent:#fbbf24;--accent2:#fb923c">
          <div class="flex items-start justify-between">
            <div class="icon-box"><i class="fa-solid fa-magnifying-glass-chart"></i></div>
            <span class="service-number">04</span>
          </div>

          <div class="mt-8">
            <span class="text-[10px] font-bold uppercase tracking-[.2em] text-amber-300">Growth Strategy</span>
            <h2 class="mt-3 text-2xl font-bold tracking-tight">SEO Optimization</h2>
            <p class="mt-4 text-sm leading-7 text-slate-400">
              Strengthen your online visibility with technical
              improvements and search-focused content.
            </p>
          </div>

          <div class="my-6 h-px bg-white/[0.07]"></div>

          <div class="flex flex-wrap gap-2">
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Technical SEO</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">On-Page</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Analytics</span>
          </div>

          <a href="#contact" class="service-link mt-7">
            Explore Service <i class="fa-solid fa-arrow-right"></i>
          </a>
        </article>

        <!-- Digital Marketing -->
        <article class="service-card reveal p-7 sm:p-8"
          style="--accent:#f472b6;--accent2:#c084fc">
          <div class="flex items-start justify-between">
            <div class="icon-box"><i class="fa-solid fa-bullhorn"></i></div>
            <span class="service-number">05</span>
          </div>

          <div class="mt-8">
            <span class="text-[10px] font-bold uppercase tracking-[.2em] text-pink-300">Brand Awareness</span>
            <h2 class="mt-3 text-2xl font-bold tracking-tight">Digital Marketing</h2>
            <p class="mt-4 text-sm leading-7 text-slate-400">
              Reach the right audience with compelling campaigns
              and effective digital marketing strategies.
            </p>
          </div>

          <div class="my-6 h-px bg-white/[0.07]"></div>

          <div class="flex flex-wrap gap-2">
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Social Media</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Campaigns</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Content</span>
          </div>

          <a href="#contact" class="service-link mt-7">
            Explore Service <i class="fa-solid fa-arrow-right"></i>
          </a>
        </article>

        <!-- Speed Optimization -->
        <article class="service-card reveal p-7 sm:p-8"
          style="--accent:#22d3ee;--accent2:#818cf8">
          <div class="flex items-start justify-between">
            <div class="icon-box"><i class="fa-solid fa-gauge-high"></i></div>
            <span class="service-number">06</span>
          </div>

          <div class="mt-8">
            <span class="text-[10px] font-bold uppercase tracking-[.2em] text-cyan-300">Web Performance</span>
            <h2 class="mt-3 text-2xl font-bold tracking-tight">Speed Optimization</h2>
            <p class="mt-4 text-sm leading-7 text-slate-400">
              Deliver faster experiences with optimized assets,
              efficient code, and performance improvements.
            </p>
          </div>

          <div class="my-6 h-px bg-white/[0.07]"></div>

          <div class="flex flex-wrap gap-2">
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Core Web Vitals</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Caching</span>
            <span class="rounded-md border border-white/[0.08] px-3 py-1.5 text-xs text-slate-300">Optimization</span>
          </div>

          <a href="#contact" class="service-link mt-7">
            Explore Service <i class="fa-solid fa-arrow-right"></i>
          </a>
        </article>

      </div>

      <!-- CTA -->
      <div id="contact" class="reveal mt-12 rounded-3xl border border-white/10 bg-white/[0.025] px-6 py-10 text-center sm:px-10">
        <h2 class="text-2xl font-bold sm:text-3xl">
          Ready to build something amazing?
        </h2>
        <p class="mx-auto mt-4 max-w-xl text-sm leading-7 text-slate-400">
          Let's discuss your next project and create a digital experience
          that makes a difference.
        </p>
        <a href="mailto:hello@example.com"
          class="mt-7 inline-flex items-center gap-3 rounded-xl bg-violet-600 px-6 py-3.5 text-sm font-bold transition duration-300 hover:-translate-y-1 hover:bg-violet-500 hover:shadow-lg hover:shadow-violet-500/20">
          Start a Project <i class="fa-solid fa-arrow-right"></i>
        </a>
      </div>

    </div>
  </section>

  <script>
    // Mouse-following spotlight
    const cards = document.querySelectorAll('.service-card');

    cards.forEach(card => {
      card.addEventListener('pointermove', event => {
        const rect = card.getBoundingClientRect();

        card.style.setProperty(
          '--mouse-x',
          `${event.clientX - rect.left}px`
        );

        card.style.setProperty(
          '--mouse-y',
          `${event.clientY - rect.top}px`
        );
      });
    });

    // Scroll reveal animation
    const revealItems = document.querySelectorAll('.reveal');

    if ('IntersectionObserver' in window) {
      const observer = new IntersectionObserver((entries, obs) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            obs.unobserve(entry.target);
          }
        });
      }, {
        threshold: 0.12
      });

      revealItems.forEach(item => observer.observe(item));
    } else {
      revealItems.forEach(item => item.classList.add('visible'));
    }
  </script>

</body>
</html>

You will also like this post

style.css

* {
box-sizing: border-box;
}

body {
font-family: 'Inter', sans-serif;
background: #080b14;
}

.services-bg {
background-image:
radial-gradient(circle at 10% 15%, rgba(124, 58, 237, .13), transparent 30%),
radial-gradient(circle at 90% 85%, rgba(14, 165, 233, .12), transparent 30%);
}

.service-card {
--mouse-x: 50%;
--mouse-y: 50%;
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 22px;
background: #0d1220;
border: 1px solid rgba(255,255,255,.09);
transform-style: preserve-3d;
transition:
transform .4s cubic-bezier(.2,.8,.2,1),
border-color .4s ease,
box-shadow .4s ease;
}

/* Mouse-following spotlight */
.service-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: radial-gradient(
350px circle at var(--mouse-x) var(--mouse-y),
rgba(139,92,246,.17),
transparent 70%
);
opacity: 0;
transition: opacity .35s ease;
}

/* Animated gradient border */
.service-card::after {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(
135deg,
transparent 15%,
var(--accent),
transparent 55%,
var(--accent2)
);
background-size: 250% 250%;
animation: borderFlow 6s linear infinite;
-webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: opacity .35s ease;
}

.service-card:hover {
transform: translateY(-10px) rotateX(2deg);
border-color: transparent;
box-shadow: 0 24px 60px rgba(0,0,0,.35),
        0 0 30px color-mix(in srgb, var(--accent) 12%, transparent);
}

.service-card:hover::before,
.service-card:hover::after {
opacity: 1;
}

@keyframes borderFlow {
0% { background-position: 0% 0%; }
100% { background-position: 250% 250%; }
}

.icon-box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
border-radius: 18px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, #0d1220);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
transition: transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease;
}

.service-card:hover .icon-box {
transform: translateY(-4px) rotate(-8deg) scale(1.08);
box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 25%, transparent);
}

.icon-box i {
font-size: 24px;
transition: transform .4s ease;
}

.service-card:hover .icon-box i {
animation: iconBounce .65s ease;
}

@keyframes iconBounce {
0%, 100% { transform: scale(1); }
40% { transform: scale(1.22); }
70% { transform: scale(.92); }
}

.service-number {
color: rgba(255,255,255,.10);
font-size: 42px;
font-weight: 800;
line-height: 1;
transition: color .35s ease;
}

.service-card:hover .service-number {
color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.service-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: #d5d9e5;
font-size: 13px;
font-weight: 600;
transition: color .3s ease;
}

.service-link i {
transition: transform .3s ease;
color: var(--accent);
}

.service-card:hover .service-link {
color: white;
}

.service-card:hover .service-link i {
transform: translateX(6px);
}

/* Entrance animations */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
opacity: 1;
transform: translateY(0);
}

.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .08s; }
.reveal:nth-child(5) { transition-delay: .16s; }
.reveal:nth-child(6) { transition-delay: .24s; }

.heading-gradient {
background: linear-gradient(100deg, #fff 10%, #c4b5fd 48%, #67e8f9 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.eyebrow-dot {
animation: pulseDot 1.8s ease-in-out infinite;
}

@keyframes pulseDot {
0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,.6); }
50% { box-shadow: 0 0 0 6px rgba(167,139,250,0); }
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}

.reveal {
opacity: 1;
transform: none;
}
}

Conclusion

In conclusion, these Animated Services Cards using HTML, Tailwind CSS, and JavaScript offer a modern and engaging way to showcase services on any website. With responsive layouts, animated gradient borders, glowing icons, interactive hover effects, and smooth scroll animations, you can create a professional UI/UX design that looks great on desktop, tablet, and mobile devices. Customize the colors, icons, and content to match your brand and use this design to enhance your next web development project.

Tags:

Post Rating

6.4 / 10

User rating: 6.4 / 10

Rate this post

Click a number to rate this article.

Web Designer & Developer

Hello, I’m Mohit, is a PHP Developer and Web Designer skilled in PHP, HTML, CSS, JavaScript, MySQL, and WordPress. He creates responsive, modern, and user-friendly websites with a focus on clean UI/UX design.

Features of Animated Services Cards Using Tailwind CSS

You will also like this post

Conclusion

Web Designer & Developer

Related Posts