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 CSS v3. It is responsive.

Related Examples

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

tailwindflex logo TailwindFlex.com
Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

© 2025 TailwindFlex. All Rights Reserved.

v1.12