Our services

Component: Interactive Services Carousel
Overview: A card-based carousel built with HTML5 and Tailwind CSS, powered by Vanilla JavaScript. It displays Adeoar's 6 main services with a responsive layout and smooth transitions.

Technical Features:

Responsive: Displays 3 columns on desktop (md breakpoint) and 1 column on mobile devices.

Dependencies: Tailwind CSS (CDN or compiled) + Native JavaScript (no external libraries like Swiper or Slick required).

Icons: Inline SVG icons (Heroicons style).

Functionalities:

Navigation: Side buttons (prev/next) and bottom pagination (indicator dots).

Automation: Autoplay runs every 4 seconds (infinite loop logic).

Interaction: Autoplay pauses automatically on mouse hover (mouseenter/mouseleave).

Style & Design (UX/UI):

Default State: White background, soft shadows, pastel-colored icon backgrounds.

Hover State (Active):

Zoom Effect: The card scales up (scale-105).

Color Inversion: Background changes to Navy Blue (bg-blue-900) and text turns white for high contrast.

Details: The icon background turns white, and the icon stroke takes the dark blue color.

This tailwind example is contributed by Juan D. Cortorreal, on 23-Nov-2025. Component is made with Tailwind v3.4. It is responsive.

Carousel

Author Juan D. Cortorreal

Tailwind v3.4 1.2k 2

Fork Fullscreen

<div class="max-w-6xl mx-auto relative" id="carousel-container">
        <h2 class="text-4xl font-extrabold text-center text-gray-800 mb-10 tracking-tight">
            Nuestros <span class="text-blue-600">Servicios</span>
        </h2>

<div class="overflow-hidden py-4"> <div id="track" class="flex transition-transform duration-500 ease-out">
                
                <div class="min-w-full md:min-w-[33.33%] p-4">
                    <div class="group bg-white rounded-2xl shadow-lg p-8 text-center h-full border border-gray-100 cursor-pointer transition-all duration-300 hover:bg-blue-900 hover:scale-105 hover:shadow-2xl">
                        <div class="bg-purple-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6 transition-colors duration-300 group-hover:bg-white">
                            <svg class="w-10 h-10 text-purple-600 group-hover:text-blue-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-3 text-gray-800 group-hover:text-white transition-colors">Arte</h3>
                        <p class="text-gray-500 group-hover:text-blue-100 transition-colors">Expresión creativa, pintura y técnicas mixtas.</p>
                    </div>
                </div>

<div class="min-w-full md:min-w-[33.33%] p-4">
                    <div class="group bg-white rounded-2xl shadow-lg p-8 text-center h-full border border-gray-100 cursor-pointer transition-all duration-300 hover:bg-blue-900 hover:scale-105 hover:shadow-2xl">
                        <div class="bg-pink-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6 transition-colors duration-300 group-hover:bg-white">
                            <svg class="w-10 h-10 text-pink-600 group-hover:text-blue-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-3 text-gray-800 group-hover:text-white transition-colors">Belleza</h3>
                        <p class="text-gray-500 group-hover:text-blue-100 transition-colors">Cursos de estética, maquillaje y cuidado personal.</p>
                    </div>
                </div>

<div class="min-w-full md:min-w-[33.33%] p-4">
                    <div class="group bg-white rounded-2xl shadow-lg p-8 text-center h-full border border-gray-100 cursor-pointer transition-all duration-300 hover:bg-blue-900 hover:scale-105 hover:shadow-2xl">
                        <div class="bg-orange-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6 transition-colors duration-300 group-hover:bg-white">
                            <svg class="w-10 h-10 text-orange-600 group-hover:text-blue-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path></svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-3 text-gray-800 group-hover:text-white transition-colors">Cocina</h3>
                        <p class="text-gray-500 group-hover:text-blue-100 transition-colors">Gastronomía internacional, repostería y más.</p>
                    </div>
                </div>

<div class="min-w-full md:min-w-[33.33%] p-4">
                    <div class="group bg-white rounded-2xl shadow-lg p-8 text-center h-full border border-gray-100 cursor-pointer transition-all duration-300 hover:bg-blue-900 hover:scale-105 hover:shadow-2xl">
                        <div class="bg-blue-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6 transition-colors duration-300 group-hover:bg-white">
                            <svg class="w-10 h-10 text-blue-600 group-hover:text-blue-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.121 14.121L19 19m-7-7l7-7m-7 7l-2.879 2.879M12 12L9.121 9.121m0 5.758a3 3 0 10-4.243 4.243 3 3 0 004.243-4.243zm0-5.758a3 3 0 10-4.243-4.243 3 3 0 004.243 4.243z"></path></svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-3 text-gray-800 group-hover:text-white transition-colors">Costura</h3>
                        <p class="text-gray-500 group-hover:text-blue-100 transition-colors">Diseño de modas, corte y confección textil.</p>
                    </div>
                </div>

<div class="min-w-full md:min-w-[33.33%] p-4">
                    <div class="group bg-white rounded-2xl shadow-lg p-8 text-center h-full border border-gray-100 cursor-pointer transition-all duration-300 hover:bg-blue-900 hover:scale-105 hover:shadow-2xl">
                        <div class="bg-green-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6 transition-colors duration-300 group-hover:bg-white">
                            <svg class="w-10 h-10 text-green-600 group-hover:text-blue-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-3 text-gray-800 group-hover:text-white transition-colors">Manualidades</h3>
                        <p class="text-gray-500 group-hover:text-blue-100 transition-colors">Creación artesanal y decoración DIY.</p>
                    </div>
                </div>

<div class="min-w-full md:min-w-[33.33%] p-4">
                    <div class="group bg-white rounded-2xl shadow-lg p-8 text-center h-full border border-gray-100 cursor-pointer transition-all duration-300 hover:bg-blue-900 hover:scale-105 hover:shadow-2xl">
                        <div class="bg-yellow-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6 transition-colors duration-300 group-hover:bg-white">
                            <svg class="w-10 h-10 text-yellow-600 group-hover:text-blue-900 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
                        </div>
                        <h3 class="text-2xl font-bold mb-3 text-gray-800 group-hover:text-white transition-colors">Seminarios</h3>
                        <p class="text-gray-500 group-hover:text-blue-100 transition-colors">Charlas educativas y crecimiento profesional.</p>
                    </div>
                </div>

</div>
        </div>

// Generar Puntos
            for (let i = 0; i <= maxIndex; i++) {
                const dot = document.createElement('button');
                dot.className = `h-3 rounded-full transition-all duration-300 ${i === 0 ? 'bg-blue-900 w-8' : 'bg-gray-300 w-3'}`;
                dot.addEventListener('click', () => { index = i; updateCarousel(); });
                dotsContainer.appendChild(dot);
            }
            const dots = dotsContainer.children;

function nextSlide() {
                index = index < maxIndex ? index + 1 : 0;
                updateCarousel();
            }
            
            function prevSlide() {
                index = index > 0 ? index - 1 : maxIndex;
                updateCarousel();
            }

// Eventos
            nextBtn.addEventListener('click', () => { nextSlide(); resetTimer(); });
            prevBtn.addEventListener('click', () => { prevSlide(); resetTimer(); });
            
            // Autoplay y Pausa
            function startTimer() { autoPlayInterval = setInterval(nextSlide, 4000); }
            function resetTimer() { clearInterval(autoPlayInterval); startTimer(); }
            container.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));
            container.addEventListener('mouseleave', startTimer);

startTimer();
            window.addEventListener('resize', () => location.reload());
        });
    </script>

Related Examples

Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.2k
Slider
Responsive slider

Abhiraj

1 year ago

3k
Image carousel
Uses Flowbite

Anonymous

1 year ago

3.6k
Simple Animated Carousel
A simple, animated 2:1 carousel with touch swipe support, based on perky98/Juraj's carousel.

Nick Girga

1 year ago

2k
Testimonials

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.3k
slider /carousel
simple slider or carousel

Omer fils ELENGA

1 year ago

1.7k
Nice and simple carousel
Nice and simple carousel, fully responsive.

dev cheick

2 years ago

4.6k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

9 months ago

637
Product Carousel with Tailwind CSS, Swiper & Alpine.js
A modern, responsive product carousel built with Tailwind CSS, Swiper, and Alpine.js. The component features smooth sliding animations, autoplay, and custom navigation controls. Each product card uses a flexible Tailwind layout and includes dynamically generated demo images, making it easy to drop into any landing page, marketing site, or product showcase. Ideal for showcasing products in a clean, lightweight, and highly customizable way.

Juraj

8 months ago

659
Image Carousel

Nikolai

2 years ago

8.1k
Simple Multi-Purpose Slider
This is a very minimalistic though very usable slider for various situations like CTA's, quotes or other uncomplicated content. I only used Tailwindcss which makes it very lightweight, but due to limitations it's not as flexible as I wished for. This could be easily achieved by a little piece of JS to make it as dynamic as you wish.

Hielke Brandsma

1 year ago

3.2k
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

649