Carousel Slider 구성 요소
날씨/기후 데이터를 보여주기 위해 설계된 기업/전문 트라이어드 색 구성표가 있는 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소입니다. 다크 모드 지원을 포함하며 시맨틱 HTML을 사용합니다.
HTML 코드
<div class="relative w-full max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900 overflow-hidden">
<h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-10">Global Climate Insights</h2>
<div class="relative flex items-center justify-center">
<button aria-label="Previous slide" class="absolute left-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
<svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-300" 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>
<div class="w-full overflow-hidden">
<div class="flex transition-transform duration-500 ease-in-out" style="transform: translateX(0%);">
<!-- Slide 1 -->
<div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
<div class="relative">
<img src="https://picsum.photos/id/1025/600/400" alt="Rainfall Pattern" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">HOT TOPIC</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Global Rainfall Patterns</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Analyzes the shifts in precipitation, highlighting regions susceptible to drought and flooding due to climate change.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
<svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
<span>3,200 views</span>
<span class="mx-2">•</span>
<svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
<span>March 15, 2023</span>
</div>
<div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Leo Thompson</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Climatologist</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
<div class="relative">
<img src="https://picsum.photos/id/1018/600/400" alt="Temperature Trends" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-teal-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">NEW RESEARCH</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Arctic Ice Melt Projections</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Examines the rapid melting of polar ice caps and its significant implications for global sea levels and ecosystems.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
<svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
<span>5,100 views</span>
<span class="mx-2">•</span>
<svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
<span>Feb. 28, 2023</span>
</div>
<div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Sofia Rossi</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Oceanographer</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
<div class="relative">
<img src="https://picsum.photos/id/1060/600/400" alt="Extreme Weather Events" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-cyan-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">FEATURED</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Frequency of Extreme Weather</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Investigates the rising occurrence of severe storms, heatwaves, and wildfires globally, linking them to changing climate.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
<svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
<span>4,500 views</span>
<span class="mx-2">•</span>
<svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
<span>Jan. 20, 2023</span>
</div>
<div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
<img src="https://randomuser.me/api/portraits/women/52.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Prof. Clara Davies</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Meteorologist</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide 4 -->
<div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
<div class="relative">
<img src="https://picsum.photos/id/1029/600/400" alt="Ocean Acidification" class="w-full h-48 object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
<span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">URGENT</span>
</div>
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Ocean Acidification Impacts</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Details the increasing acidity of oceans due to CO2 absorption and its devastating effects on marine life and coral reefs.</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
<svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
<span>6,800 views</span>
<span class="mx-2">•</span>
<svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
<span>Dec. 5, 2022</span>
</div>
<div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
<img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
<div>
<p class="text-sm font-medium text-gray-900 dark:text-white">Dr. James Chen</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Marine Biologist</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button aria-label="Next slide" class="absolute right-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
<svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-300" 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>
</div>
<div role="tablist" aria-label="Carousel pagination" class="flex justify-center mt-8 space-x-2">
<button role="tab" aria-selected="true" aria-controls="slide-1" class="w-3 h-3 bg-cyan-600 dark:bg-cyan-400 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"></button>
<button role="tab" aria-selected="false" aria-controls="slide-2" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
<button role="tab" aria-selected="false" aria-controls="slide-3" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
<button role="tab" aria-selected="false" aria-controls="slide-4" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
</div>
</div>관련 구성 요소
Carousel Slider 구성 요소
블로그 및 콘텐츠 소비를 위해 설계된 미니멀한 캐러셀 슬라이더 구성 요소로, 트라이어딕 색 구성표와 어두운 테마를 지원하는 반응형 디자인이 특징입니다.
포트폴리오를 위한 3D 캐러셀 슬라이더 구성 요소
반응형 3D에서 영감을 받은 캐러셀 슬라이더 구성 요소로, 포트폴리오 항목을 표시하며, 보색과 다크 모드를 지원합니다. 깊이와 참여도를 염두에 두고 설계되었습니다.
Carousel Slider 구성 요소
다크 모드를 지원하는 전자 상거래를 위한 반응형 Carousel Slider 구성 요소입니다. 제품 이미지, 이름, 가격 및 장바구니에 담기 버튼이 있습니다. 이 디자인은 다크 모드에 적합한 보색 구성표를 사용하여 시각적 편안함과 제품 프레젠테이션을 향상시킵니다.