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 responsive carousel slider component designed in a brutalism style using Tailwind CSS, featuring high contrast, unusual layouts, and dark theme support.
Carousel Slider Component
A responsive Carousel Slider Component for e-commerce with dark mode support. It features product images, names, prices, and add-to-cart buttons. The design uses a complementary color scheme suitable for dark mode, enhancing visual comfort and product presentation.
Carousel Slider Component
A responsive carousel slider component with dark mode support. This component uses only HTML and Tailwind CSS, with no JavaScript. It features a simple layout with vibrant colors for the active slide, suitable for blog or content consumption.