Neumorphism 태그 클라우드 구성 요소
Neumorphism 디자인, 파스텔 색 구성표 및 복잡한 상호 작용을 갖춘 반응형 Tag Cloud 구성 요소로, 전자 상거래에 맞게 조정되었습니다. 다크 모드 지원이 포함되며 Tailwind CSS를 사용합니다.
HTML 코드
<div class="p-4 dark:bg-gray-800">
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="col-span-2 md:col-span-3 lg:col-span-4 text-center text-lg font-semibold text-gray-700 dark:text-gray-300">Popular Tags</div>
<div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphism-light dark:shadow-neumorphism-dark flex flex-wrap gap-2 justify-center">
<span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Electronics</span>
<span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Apparel</span>
<span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Home & Garden</span>
<span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Books</span>
<span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Toys & Games</span>
<span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Beauty</span>
<span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Sports</span>
<span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Outdoors</span>
<span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Automotive</span>
<span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Jewelry</span>
</div>
</div>
</div>
<style>
.shadow-neumorphism-light {
box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
}
.dark .shadow-neumorphism-dark {
box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
}
.shadow-inner-neumorphism-light {
box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #f2f3f7;
}
.dark .shadow-inner-neumorphism-dark {
box-shadow: inset 2px 2px 5px #333, inset -5px -5px 10px #555;
}
.hover\:shadow-outer-neumorphism-light:hover {
box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
}
.dark .hover\:shadow-outer-neumorphism-dark:hover {
box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
}
.bg-pastel-blue { background-color: #a7c7e7; }
.bg-pastel-green { background-color: #b2dfdb; }
.bg-pastel-pink { background-color: #f8c8dc; }
.bg-pastel-yellow { background-color: #ffecb3; }
.bg-pastel-purple { background-color: #e1bee7; }
</style>