Carousel Slider 구성 요소
뉴스/저널리즘 웹사이트를 위한 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 회색조 색 구성표의 다크 모드 UI를 특징으로 합니다. 이미지, 제목, 설명 및 범주가 포함된 뉴스 기사를 표시하며 눈의 피로를 줄이도록 설계되었습니다.
HTML 코드
<div class="relative w-full max-w-7xl mx-auto py-8 px-4 dark:bg-gray-900 bg-white sm:px-6 lg:px-8">
<!-- Carousel Header -->
<div class="flex items-center justify-between mb-8">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Latest Headlines
</h2>
<a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
View All
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
<!-- Carousel Container (Simplified for static HTML, requires JS for actual carousel functionality) -->
<!-- In a real scenario, this would be a JS-controlled carousel. For this HTML-only component, we'll show a responsive grid layout that implies a carousel structure. -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Carousel Item 1 -->
<div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
<div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
<img src="https://picsum.photos/600/400?random=1" alt="News Article 1" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
Technology
</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
<span class="absolute inset-0"></span>
Breakthrough in AI Research Announced
</a>
</h3>
<p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
Researchers at the leading global institute have unveiled a groundbreaking development in artificial intelligence, promising to revolutionize several industries.
</p>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center font-medium text-gray-900 dark:text-white">
<img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
Jane Doe
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Editor</span>
</div>
<a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
Read More
</a>
</div>
</div>
</div>
<!-- Carousel Item 2 -->
<div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
<div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
<img src="https://picsum.photos/600/400?random=2" alt="News Article 2" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
Politics
</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
<span class="absolute inset-0"></span>
Global Leaders Discuss Climate Change at Summit
</a>
</h3>
<p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
Heads of state convened today for a critical summit to address the escalating climate crisis and pledge new initiatives.
</p>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center font-medium text-gray-900 dark:text-white">
<img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
John Smith
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Reporter</span>
</div>
<a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
Read More
</a>
</div>
</div>
</div>
<!-- Carousel Item 3 -->
<div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
<div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
<img src="https://picsum.photos/600/400?random=3" alt="News Article 3" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
</div>
<div class="p-6">
<div class="flex items-center mb-2">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
Health
</span>
<span class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
<a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
<span class="absolute inset-0"></span>
New Study Reveals Benefits of Mediterranean Diet
</a>
</h3>
<p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
A comprehensive new study has provided compelling evidence regarding the significant health benefits associated with adhering to a Mediterranean diet.
</p>
<div class="mt-6 flex items-center justify-between">
<div class="flex items-center font-medium text-gray-900 dark:text-white">
<img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
David Lee
<span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Correspondent</span>
</div>
<a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
Read More
</a>
</div>
</div>
</div>
</div>
<!-- Pagination/Navigation (Placeholder for a real carousel) -->
<div class="mt-12 flex justify-center space-x-2">
<button aria-label="Previous slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
<span class="sr-only">Current slide: 1</span>
<button aria-label="Slide 1" class="w-3 h-3 rounded-full bg-gray-800 dark:bg-gray-100 ring-2 ring-transparent ring-offset-2 ring-offset-gray-900 focus:outline-none focus:ring-gray-500"></button>
<button aria-label="Slide 2" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
<button aria-label="Slide 3" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
<button aria-label="Next slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>관련 구성 요소
Carousel Slider 구성 요소
Tailwind CSS를 사용하여 "포트폴리오 - 작업 또는 제품 전시"를 위해 "보색 - 색상환에서 서로 반대편에 있는 색상" 및 복잡성 수준 "복잡함 - 여러 대화형 요소가 있는 풍부한 인터페이스"를 사용하여 디자인 스타일 "Neumorphism - 미묘한 그림자를 사용하여 배경에서 돌출되는 것처럼 보이는 요소를 만드는 소프트 UI 스타일"로 웹 구성 요소 Carousel Slider Component를 구현합니다. 어두운 테마를 지원하는 반응형 디자인을 만들 수 있습니다. JavaScript 코드가 필요하지 않으며 Tailwind 클래스가 있는 HTML만 필요합니다. 다크 모드의 경우 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지가 필요한 경우 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.
네온 글로우 푸드 캐러셀 슬라이더
네온 글로우 효과와 사탕/달콤한 색 구성표가 있는 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 다크 모드 지원을 포함하여 음식 배달 및 레스토랑 웹사이트를 위해 설계되었습니다.
3D_Vibrant_Simple_Social_Carousel
소셜 미디어 인터페이스를 위한 간단하고 생생하며 반응이 빠른 3D 스타일의 캐러셀 슬라이더 구성 요소로, 다크 모드를 지원합니다.