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>관련 구성 요소
태그 클라우드 구성 요소
코드에서 영감을 받은 고정 폭 태그 클라우드 구성 요소로, 고대비 색상과 다크 모드를 지원하는 게임 웹 사이트를 위한 구성 요소입니다. 인터랙티브 태그가 있는 터미널과 같은 미학이 특징입니다.