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

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
Premium Testimonial Carousel
It is a premium Testimonial Carousel

ishimwe shadad

1 year ago

2.3k
slider /carousel
simple slider or carousel

Omer fils ELENGA

1 year ago

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

2 months ago

209
Carousel

Crimson

1 year ago

8.4k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Brandon D

4 years ago

33.5k
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Omer fils ELENGA

10 months ago

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

5 months ago

332
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)

Juraj

1 year ago

2.4k
Custom Carosel

Md. Tofayel islam

2 years ago

3.9k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

2.3k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

10 months ago

669