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

Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Salah eldein

10 months ago

704
slider /carousel
simple slider or carousel

Omer fils ELENGA

1 year ago

1.7k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

937
Image Carousel

Nikolai

2 years ago

8.1k
Responsive Image Carousel with Alpine.js
This component is a fully responsive image carousel/slider that displays: 1 slide at a time on mobile devices (screen width < 768px) 3 slides at a time on desktop (screen width ≥ 768px)

Salah eldein

10 months ago

754
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Brandon D

4 years ago

33.5k
card section neon
card section neon

Omer fils ELENGA

7 months ago

1.3k
3D Coverflow Slider — Ambient Background
A depth-based 3D slider with real perspective and rotateY transforms (not just fade), paired with a drifting polyhedra background that responds to cursor movement. Zero dependencies — pure Tailwind utilities, one config file, and vanilla JS. Auto-plays, pauses on hover, fully keyboard/dot-navigable. Swap the color tokens in the config to reskin it.

Azeem warraich

4 weeks ago

148
Team Hero Section with Carousel
A clean and responsive hero section featuring an experts carousel built with Tailwind CSS, Swiper, and Alpine.js. The section highlights key experts with contact details and a clear call-to-action, making it ideal for landing pages and service-focused websites.

Juraj

8 months ago

509
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

593
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

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

Nick Girga

1 year ago

1.9k