Glassmorphism 태그 클라우드 구성 요소
보라색/보라색 색 구성표가 있는 glassmorphism 스타일의 태그 클라우드 구성 요소로, 포트폴리오에 적합합니다. 반투명 반투명 요소, 반응형 디자인, 다크 모드 지원이 특징입니다.
HTML 코드
<div class="p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen bg-gradient-to-br from-purple-100 via-violet-200 to-indigo-100 dark:from-purple-950 dark:via-violet-900 dark:to-indigo-950 flex items-center justify-center font-sans">
<div class="relative w-full max-w-4xl p-6 md:p-8 lg:p-10 rounded-3xl overflow-hidden shadow-xl
bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg border border-opacity-30 border-white
dark:bg-purple-900 dark:bg-opacity-20 dark:border-purple-700 dark:border-opacity-30
transition-all duration-500 ease-in-out transform hover:scale-[1.01]">
<!-- Glassy Overlay for more depth -->
<div class="absolute inset-0 pointer-events-none rounded-3xl
bg-gradient-to-br from-white to-transparent opacity-10
dark:from-purple-800 dark:to-transparent dark:opacity-10">
</div>
<h2 class="relative z-10 text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-900 dark:text-violet-200 mb-6 text-center
drop-shadow-lg [text-shadow:_0_2px_8px_rgb(0_0_0_/_0.1)] dark:[text-shadow:_0_2px_8px_rgb(128_0_128_/_0.3)] transition-colors duration-300">
My Skillset & Interests
</h2>
<p class="relative z-10 text-lg sm:text-xl text-purple-800 dark:text-violet-300 mb-8 text-center max-w-2xl mx-auto
opacity-90 leading-relaxed transition-colors duration-300">
Explore the diverse range of technologies and domains I'm passionate about.
</p>
<div class="relative z-10 flex flex-wrap justify-center gap-3 sm:gap-4 lg:gap-5">
<!-- Example Tags -->
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">TailwindCSS</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">React.js</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Node.js</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">TypeScript</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">MongoDB</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Express.js</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">RESTful APIs</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Git & GitHub</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Responsive Design</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">UI/UX Principles</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Agile Methodologies</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<div class="group relative overflow-hidden rounded-full px-5 py-2 sm:px-6 sm:py-2.5
bg-purple-300 bg-opacity-40 text-purple-900
dark:bg-violet-700 dark:bg-opacity-40 dark:text-violet-100
backdrop-filter backdrop-blur-sm border border-purple-300 border-opacity-60
dark:border-violet-600 dark:border-opacity-60
transition-all duration-300 ease-in-out
hover:scale-105 hover:shadow-lg
hover:bg-purple-400 hover:bg-opacity-60 dark:hover:bg-violet-600 dark:hover:bg-opacity-60
cursor-pointer">
<span class="relative z-10 text-sm sm:text-base font-semibold">Problem Solving</span>
<div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-transparent opacity-0 group-hover:opacity-20 dark:from-violet-500"></div>
</div>
<!-- More tags if needed -->
</div>
</div>
</div>관련 구성 요소
태그 클라우드 구성 요소
마이크로 인터랙션이 있는 복잡하고 반응이 빠른 Tag Cloud 구성 요소로, 그레이스케일 색 구성표를 사용하여 대시보드용으로 설계되었습니다. 다크 모드를 지원합니다.
태그 클라우드 구성 요소 13
Neumorphism 스타일로 설계된 Tag Cloud 구성 요소입니다. 미묘한 그림자를 사용하여 배경에서 돌출되는 것처럼 보이는 요소가 있는 부드러운 UI 스타일이 특징입니다. 이 구성 요소는 반응형 디자인과 어두운 테마를 지원합니다.
태그 클라우드 구성 요소
포트폴리오를 위해 설계된 뉴모픽 태그 클라우드 컴포넌트로, 단색 색 구성표, 반응형 레이아웃, Tailwind CSS를 사용한 다크 모드 지원이 있는 태그를 보여줍니다.