Art Deco Tag Cloud 구성 요소
아르데코 미학으로 디자인된 반응형 태그 클라우드 구성 요소로, 기하학적 패턴과 고급스러운 블루 톤을 특징으로 하며 소셜 미디어 인터페이스에 적합합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 min-h-screen p-4 sm:p-8 flex items-center justify-center">
<div class="w-full max-w-4xl bg-gradient-to-br from-blue-50 to-blue-200 dark:from-blue-950 dark:to-blue-800 rounded-3xl shadow-xl overflow-hidden relative p-6 sm:p-10 border-4 border-blue-500 dark:border-blue-700 transform transition-all duration-300 hover:scale-[1.01]">
<!-- Art Deco Background Pattern -->
<div class="absolute inset-0 opacity-20 dark:opacity-10 pointer-events-none overflow-hidden">
<svg class="absolute w-[150%] h-[150%] left-[-25%] top-[-25%]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M0 0 L5 0 L5 5 L0 5 Z M5 5 L10 5 L10 10 L5 10 Z" fill="rgba(0,0,0,0.1)"/>
<path d="M5 0 L10 0 L10 5 L5 5 Z M0 5 L5 5 L5 10 L0 10 Z" fill="rgba(0,0,0,0.05)"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#artDecoPattern)"/>
</svg>
<div class="absolute inset-0 bg-gradient-to-t from-transparent to-white dark:to-transparent opacity-10"></div>
</div>
<div class="relative z-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center text-blue-900 dark:text-blue-100 mb-6 sm:mb-8 tracking-wider uppercase drop-shadow-md">
<span class="block">Explore Topics</span>
<span class="inline-block bg-blue-700 dark:bg-blue-300 h-1 w-20 rounded-full my-2 sm:my-3"></span>
</h2>
<div class="flex flex-wrap justify-center gap-3 sm:gap-4 lg:gap-5">
<!-- Individual Tags -->
<a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-300 dark:border-blue-700
hover:bg-blue-200 dark:hover:bg-blue-700
hover:text-blue-900 dark:hover:text-white
font-semibold text-sm sm:text-base
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Tech
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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>
</a>
<a href="#" class="group flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-400 dark:border-blue-600
hover:bg-blue-300 dark:hover:bg-blue-600
hover:text-blue-900 dark:hover:text-white
font-bold text-base sm:text-lg
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Design
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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>
</a>
<a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-300 dark:border-blue-700
hover:bg-blue-200 dark:hover:bg-blue-700
hover:text-blue-900 dark:hover:text-white
font-semibold text-sm sm:text-base
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Coding
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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>
</a>
<a href="#" class="group flex items-center bg-blue-50 dark:bg-blue-900 text-blue-800 dark:text-blue-300 px-3 py-1 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-200 dark:border-blue-800
hover:bg-blue-100 dark:hover:bg-blue-850
hover:text-blue-900 dark:hover:text-white
font-medium text-xs sm:text-sm
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#WebDev
<svg class="ml-2 w-3 h-3 text-blue-500 dark:text-blue-500 group-hover:animate-bounceX" 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>
</a>
<a href="#" class="group flex items-center bg-blue-300 dark:bg-blue-600 text-blue-900 dark:text-white px-5 py-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-500 dark:border-blue-500
hover:bg-blue-400 dark:hover:bg-blue-500
hover:text-blue-950 dark:hover:text-white
font-extrabold text-lg sm:text-xl
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#SocialMedia
<svg class="ml-2 w-5 h-5 text-blue-700 dark:text-blue-300 group-hover:animate-bounceX" 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>
</a>
<a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-300 dark:border-blue-700
hover:bg-blue-200 dark:hover:bg-blue-700
hover:text-blue-900 dark:hover:text-white
font-semibold text-sm sm:text-base
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Trends
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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>
</a>
<a href="#" class="group flex items-center bg-blue-50 dark:bg-blue-900 text-blue-800 dark:text-blue-300 px-3 py-1 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-200 dark:border-blue-800
hover:bg-blue-100 dark:hover:bg-blue-850
hover:text-blue-900 dark:hover:text-white
font-medium text-xs sm:text-sm
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Community
<svg class="ml-2 w-3 h-3 text-blue-500 dark:text-blue-500 group-hover:animate-bounceX" 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>
</a>
<a href="#" class="group flex items-center bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-300 dark:border-blue-700
hover:bg-blue-200 dark:hover:bg-blue-700
hover:text-blue-900 dark:hover:text-white
font-semibold text-sm sm:text-base
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Networking
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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>
</a>
<a href="#" class="group flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-2 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95
border-2 border-blue-400 dark:border-blue-600
hover:bg-blue-300 dark:hover:bg-blue-600
hover:text-blue-900 dark:hover:text-white
font-bold text-base sm:text-lg
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-blue-400/50 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
">
#Digital
<svg class="ml-2 w-4 h-4 text-blue-600 dark:text-blue-400 group-hover:animate-bounceX" 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>
</a>
</div>
</div>
</div>
</div>
<!-- Custom Styles for Bounce Animation (can be in a <style> tag or utility class if possible) -->
<style>
@keyframes bounceX {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
.group-hover\:animate-bounceX {
animation: bounceX 0.6s ease-in-out infinite;
}
/* Dark mode pattern adjustment if using external CSS, otherwise Tailwind's dark: prefix handles colors */
/* If you want the SVG pattern to change opacity specifically for dark mode, this would be the place */
/* or use inline style for a more dynamic change with JS if needed, but per requirements, stick to CSS */
</style>관련 구성 요소
Bauhaus 태그 클라우드 구성 요소
Bauhaus에서 영감을 받은 디자인의 복잡하고 반응이 빠른 태그 클라우드 구성 요소로, 쿨 뉴트럴을 사용하여 다크 모드를 지원하는 교육용 플랫폼에 적합합니다.
태그 클라우드 구성 요소 13
Neumorphism 스타일로 설계된 Tag Cloud 구성 요소입니다. 미묘한 그림자를 사용하여 배경에서 돌출되는 것처럼 보이는 요소가 있는 부드러운 UI 스타일이 특징입니다. 이 구성 요소는 반응형 디자인과 어두운 테마를 지원합니다.