Bauhaus 태그 클라우드 구성 요소
Bauhaus에서 영감을 받은 디자인의 복잡하고 반응이 빠른 태그 클라우드 구성 요소로, 쿨 뉴트럴을 사용하여 다크 모드를 지원하는 교육용 플랫폼에 적합합니다.
HTML 코드
<div class="font-sans p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
<div class="max-w-7xl mx-auto py-8 sm:py-12 lg:py-16">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-8 sm:mb-10 text-center tracking-tight leading-tight dark:text-white text-gray-800">
<span class="block">Explore Topics</span>
<span class="block text-blue-600 dark:text-blue-400">Knowledge Hub</span>
</h1>
<div class="mb-8 sm:mb-10 lg:mb-12 flex flex-col sm:flex-row items-stretch sm:items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
<div class="relative flex-grow">
<input type="text" placeholder="Search tags..." class="w-full pl-10 pr-4 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-all duration-300 ease-in-out">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out">
Apply Filters
</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
<div class="card-panel p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-b-4 border-blue-600 dark:border-blue-500 transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-xl">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Popular Tags</h2>
<div class="flex flex-wrap gap-3">
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-blue-200 hover:text-blue-800 dark:hover:bg-blue-800 dark:hover:text-blue-200">Science & Innovation</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-red-200 hover:text-red-800 dark:hover:bg-red-800 dark:hover:text-red-200">Art History</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-green-200 hover:text-green-800 dark:hover:bg-green-800 dark:hover:text-green-200">Data Science</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-purple-200 hover:text-purple-800 dark:hover:bg-purple-800 dark:hover:text-purple-200">Philosophy</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-yellow-200 hover:text-yellow-800 dark:hover:bg-yellow-800 dark:hover:text-yellow-200">World Literature</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-teal-200 hover:text-teal-800 dark:hover:bg-teal-800 dark:hover:text-teal-200">Sustainable Energy</span>
</div>
</div>
<div class="card-panel p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-b-4 border-gray-400 dark:border-gray-500 transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-xl">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Recently Added</h2>
<div class="flex flex-wrap gap-3">
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-blue-200 hover:text-blue-800 dark:hover:bg-blue-800 dark:hover:text-blue-200">Quantum Computing</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-red-200 hover:text-red-800 dark:hover:bg-red-800 dark:hover:text-red-200">Modern Art</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-green-200 hover:text-green-800 dark:hover:bg-green-800 dark:hover:text-green-200">Machine Learning Ethics</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-purple-200 hover:text-purple-800 dark:hover:bg-purple-800 dark:hover:text-purple-200">Existentialism</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-yellow-200 hover:text-yellow-800 dark:hover:bg-yellow-800 dark:hover:text-yellow-200">Postcolonial Theory</span>
</div>
</div>
<div class="card-panel p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-b-4 border-blue-600 dark:border-blue-500 transition-all duration-300 ease-in-out transform hover:scale-[1.01] hover:shadow-xl">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Trending Now</h2>
<div class="flex flex-wrap gap-3">
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-blue-200 hover:text-blue-800 dark:hover:bg-blue-800 dark:hover:text-blue-200">AI & Society</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-red-200 hover:text-red-800 dark:hover:bg-red-800 dark:hover:text-red-200">Digital Humanities</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-green-200 hover:text-green-800 dark:hover:bg-green-800 dark:hover:text-green-200">Cybersecurity Basics</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-purple-200 hover:text-purple-800 dark:hover:bg-purple-800 dark:hover:text-purple-200">Critical Thinking</span>
<span class="tag-pill bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-yellow-200 hover:text-yellow-800 dark:hover:bg-yellow-800 dark:hover:text-yellow-200">Global Economics</span>
</div>
</div>
<div class="card-panel col-span-1 sm:col-span-2 lg:col-span-3 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-b-4 border-gray-400 dark:border-gray-500 transition-all duration-300 ease-in-out transform hover:scale-[1.005] hover:shadow-xl">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">All Tags (A-Z)</h2>
<div class="flex flex-wrap items-center gap-x-6 gap-y-4 text-xl sm:text-2xl font-medium">
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Algorithms
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (12 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Astrophysics
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (8 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Biotechnology
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (15 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Climate Change
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (10 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Cognitive Science
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (7 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Cybersecurity
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (18 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Digital Marketing
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (9 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Environmental Policy
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (11 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Financial Literacy
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (14 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Game Development
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (13 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Global Health
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (6 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Human Rights
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (10 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Information Theory
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (5 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Journalism
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (8 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Kinetics
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (4 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Leadership
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (16 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Machine Learning
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (20 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Nanotechnology
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (7 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Organizational Behavior
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (9 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Project Management
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (19 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Quantum Physics
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (6 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Robotics
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (12 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Sociology
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (10 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Thermodynamics
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (5 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Urban Planning
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (8 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Virtual Reality
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (11 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Web Development
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (25 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Xenobiotics
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (2 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Youth Studies
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (7 courses)</span>
</a>
<a href="#" class="inline-block relative text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 before:absolute before:-bottom-1 before:left-0 before:w-0 before:h-0.5 before:bg-blue-600 dark:before:bg-blue-400 before:transition-all before:duration-300 hover:before:w-full">
Zoology
<span class="block text-xs font-normal text-gray-500 dark:text-gray-400"> (6 courses)</span>
</a>
</div>
</div>
</div>
</div>
<!-- Tailwind Typography plugin classes (if used, should be configured in tailwind.config.js) -->
<style>
.tag-pill {
@apply px-4 py-2 rounded-full font-medium transition-colors duration-200 ease-in-out cursor-pointer text-sm sm:text-base;
}
.card-panel {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
}
/* Ensuring dark mode transitions */
.dark .card-panel {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 10px 15px rgba(0, 0, 0, 0.3);
}
</style>
</div>관련 구성 요소
Retro Tag Cloud 구성 요소
Tailwind CSS를 사용하는 반응형 태그 클라우드 구성 요소로, 레트로/빈티지 디자인 미학, 파스텔 색 구성표 및 단순한 복잡성을 갖추고 있습니다. 다크 모드 지원을 포함한 포트폴리오에 적합합니다.
태그 클라우드 구성 요소 13
Neumorphism 스타일로 설계된 Tag Cloud 구성 요소입니다. 미묘한 그림자를 사용하여 배경에서 돌출되는 것처럼 보이는 요소가 있는 부드러운 UI 스타일이 특징입니다. 이 구성 요소는 반응형 디자인과 어두운 테마를 지원합니다.