Glassmorphism Carousel Slider
A responsive carousel slider component with glassmorphism style, suitable for blog and content consumption. It features multiple content slides, frosted glass-like elements, and is designed for both light and dark themes.
HTML Code
<div class="relative w-full max-w-4xl mx-auto mt-10">
<div class="flex overflow-hidden rounded-lg shadow-lg">
<div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Slide 1">
<div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 1</div>
</div>
<div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Slide 2">
<div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 2</div>
</div>
<div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Slide 3">
<div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 3</div>
</div>
</div>
<div class="flex justify-center mt-4">
<button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Previous</button>
<button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Next</button>
</div>
<div class="mt-4 flex justify-around">
<div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
<p class="text-center text-white mt-2">Author 1</p>
</div>
<div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2">
<p class="text-center text-white mt-2">Author 2</p>
</div>
<div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 3">
<p class="text-center text-white mt-2">Author 3</p>
</div>
</div>
</div>Related Components
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.
Dark Mode Carousel Slider Component
Dark Mode Carousel Slider Component with responsive effects and dark theme support using Tailwind CSS.
Carousel Slider Component
A simple carousel slider component designed for e-commerce in dark mode using Tailwind CSS.