Brutalism Carousel Slider Component
Brutalism Carousel Slider with Tailwind CSS, responsiveness, and dark mode. Includes navigation buttons and uses placeholder images.
HTML Code
<section class="bg-white dark:bg-black text-black dark:text-white p-8">
<div class="container mx-auto">
<div class="relative" data-carousel="static">
<!-- Carousel wrapper -->
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/id/237/800/400" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Placeholder Image 1">
</div>
<!-- Item 2 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/id/238/800/400" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Placeholder Image 2">
</div>
<!-- Item 3 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/id/239/800/400" class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="Placeholder Image 3">
</div>
</div>
<!-- Slider indicators -->
<div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
<button type="button" class="w-3 h-3 rounded-full bg-black dark:bg-white" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-full bg-black dark:bg-white" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-full bg-black dark:bg-white" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
</div>
<!-- Slider controls -->
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 dark:bg-white/30 group-hover:bg-black/50 dark:group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-black/40 dark:group-focus:ring-white/40">
<svg class="w-4 h-4 text-white dark:text-black rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
</svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 dark:bg-white/30 group-hover:bg-black/50 dark:group-hover:bg-white/50 group-focus:ring-4 group-focus:ring-black/40 dark:group-focus:ring-white/40">
<svg class="w-4 h-4 text-white dark:text-black rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
</div>
</section>Related Components
Carousel Slider Component
A simple carousel slider component designed for e-commerce in dark mode using Tailwind CSS.
Neumorphism Carousel Slider
Responsive Carousel Slider Component with Neumorphism style, Pastel color scheme, Moderate complexity, Social Media purpose, and Dark theme support using Tailwind CSS.
Carousel Slider Component
A simple, responsive carousel slider component with Material Design aesthetics, sepia/brown tones, and dark mode support, suitable for a portfolio. Uses no JavaScript, making it a purely CSS-driven component.