태그 클라우드 구성 요소
단순하고 반응이 빠른 태그 클라우드 구성 요소로, 모노스페이스/개발자 미학, 차분한 색 구성표를 사용하며 여행/관광 웹사이트를 위해 설계되었습니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="font-mono bg-gray-100 text-gray-800 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-start justify-center">
<div class="w-full max-w-4xl bg-white shadow-lg rounded-lg border border-gray-200 dark:bg-gray-800 dark:border-gray-700 overflow-hidden">
<div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-50 mb-2">
<span class="block">explore: _</span>
<span class="sr-only">Explore Destinations</span>
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">Discover popular travel tags and destinations.</p>
</div>
<div class="p-4 sm:p-6">
<div class="flex flex-wrap gap-2 sm:gap-3">
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-800 dark:text-blue-100 dark:hover:bg-blue-700 transition-colors duration-200">
<span class="pr-1">•</span> Beaches
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-800 dark:text-green-100 dark:hover:bg-green-700 transition-colors duration-200">
<span class="pr-1">•</span> Mountains
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-700 transition-colors duration-200">
<span class="pr-1">•</span> Cities
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-800 dark:text-yellow-100 dark:hover:bg-yellow-700 transition-colors duration-200">
<span class="pr-1">•</span> Adventures
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-800 dark:text-red-100 dark:hover:bg-red-700 transition-colors duration-200">
<span class="pr-1">•</span> Culture
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-indigo-100 text-indigo-800 hover:bg-indigo-200 dark:bg-indigo-800 dark:text-indigo-100 dark:hover:bg-indigo-700 transition-colors duration-200">
<span class="pr-1">•</span> Wildlife
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-pink-100 text-pink-800 hover:bg-pink-200 dark:bg-pink-800 dark:text-pink-100 dark:hover:bg-pink-700 transition-colors duration-200">
<span class="pr-1">•</span> Ecotourism
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-teal-100 text-teal-800 hover:bg-teal-200 dark:bg-teal-800 dark:text-teal-100 dark:hover:bg-teal-700 transition-colors duration-200">
<span class="pr-1">•</span> Relaxation
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-orange-100 text-orange-800 hover:bg-orange-200 dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700 transition-colors duration-200">
<span class="pr-1">•</span> Historical Sites
</a>
<a href="#" class="inline-flex items-center px-3 py-1 text-xs sm:text-sm font-medium rounded-full bg-cyan-100 text-cyan-800 hover:bg-cyan-200 dark:bg-cyan-800 dark:text-cyan-100 dark:hover:bg-cyan-700 transition-colors duration-200">
<span class="pr-1">•</span> Food Tours
</a>
</div>
</div>
</div>
</div>관련 구성 요소
Watercolor/Artistic Tag Cloud 컴포넌트
수채화/예술적 디자인 스타일과 파스텔 색상 구성표가 있는 복잡하고 반응이 빠른 태그 클라우드 구성 요소로, 포럼/커뮤니티 플랫폼에 적합합니다. 다크 모드를 지원합니다.