Carousel Slider Component
Implement a web component Carousel Slider Component with design style "Neumorphism - A soft UI style that creates elements appearing to extrude from the background using subtle shadows" using color scheme "Complementary - Colors opposite each other on the color wheel" and complexity level "Complex - Rich interface with multiple interactive elements", for purpose "Portfolio - For showcasing work or products" using Tailwind CSS. Create a responsive design with dark theme support. No JavaScript code is needed, only HTML with Tailwind classes. For dark mode, use Tailwind's dark: prefix for styling. If images are needed, use picsum.photos for images and randomuser.me for avatars.
HTML Code
<section class="flex items-center justify-center w-screen min-h-screen py-10 text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-900">
<div class="flex flex-col items-center justify-center max-w-screen-lg">
<div class="flex items-center justify-center w-full h-auto">
<div class="w-full h-full carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<label for="carousel-3" class="carousel-control prev control-1">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-2" class="carousel-control next control-1">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
<label for="carousel-1" class="carousel-control prev control-2">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-3" class="carousel-control next control-2">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
<label for="carousel-2" class="carousel-control prev control-3">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-1" class="carousel-control next control-3">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
</div>
</div>
</div>
</div>
<style>
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
visibility: hidden;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.carousel-open:checked ~ .carousel-item:not(.carousel-item) {
opacity: 0;
}
.carousel-open:checked ~ .control-1,
.carousel-open:checked ~ .control-2,
.carousel-open:checked ~ .control-3 {
display: flex;
}
.carousel-control {
z-index: 1;
display: none;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
width: 10%;
cursor: pointer;
opacity: 50%;
transition: opacity 150ms ease-in-out;
}
.carousel-control:hover {
opacity: 100%;
}
.control-1,
.control-2,
.control-3 {
width: 5vh;
height: 5vh;
border-radius: 50%;
position: absolute;
}
.control-1 {
top: 45%;
left: 5%;
}
.control-2 {
top: 45%;
right: 5%;
}
.control-3 {
top: 45%;
left: 5%;
}
</style>
</section>Related Components
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 28
A minimalist carousel slider component featuring responsive design and dark theme support.
Carousel Slider Component
A complex, responsive carousel slider component for news/journalism websites, featuring a dark mode UI with a grayscale color scheme. It displays news articles with images, titles, descriptions, and categories, and is designed to reduce eye strain.