Interactive Components 구성 요소
음식/레스토랑 웹사이트를 위해 설계된 생생한 색 구성표를 가진 복잡한 대화형 뉴모피즘 스타일 구성 요소입니다. 여기에는 대화형 버튼, 슬라이더 및 선택 요소가 포함되어 있으며 다크 모드 지원과 완전한 응답성을 제공합니다.
HTML 코드
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
<!-- Component Wrapper -->
<div class="max-w-4xl mx-auto p-6 lg:p-8 rounded-3xl shadow-xl border border-white dark:border-gray-700
bg-gradient-to-br from-indigo-100 to-purple-200 dark:from-gray-850 dark:to-gray-950
transform transition-all duration-300 hover:shadow-2xl hover:scale-100 dark:hover:shadow-lg">
<h1 class="text-4xl lg:text-5xl font-extrabold mb-8 text-center
text-indigo-700 dark:text-purple-400
text-shadow-md drop-shadow-lg
relative after:content-[''] after:absolute after:bottom-[-8px] after:left-1/2 after:-translate-x-1/2
after:w-16 after:h-1.5 after:rounded-full after:bg-purple-500 dark:after:bg-indigo-300">
Order delicious food!</h1>
<!-- Category Selection -->
<div class="mb-10">
<h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Categories</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
<!-- Category Card 1 -->
<button class="category-button group">
<img src="https://picsum.photos/id/1080/100/100" alt="Burger" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
<span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Burgers</span>
</button>
<!-- Category Card 2 -->
<button class="category-button group">
<img src="https://picsum.photos/id/1040/100/100" alt="Pizza" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
<span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Pizzas</span>
</button>
<!-- Category Card 3 -->
<button class="category-button group">
<img src="https://picsum.photos/id/1050/100/100" alt="Sushi" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
<span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Sushi</span>
</button>
<!-- Category Card 4 -->
<button class="category-button group">
<img src="https://picsum.photos/id/1049/100/100" alt="Desserts" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
<span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Desserts</span>
</button>
</div>
</div>
<!-- Price Range Slider (Conceptual) -->
<div class="mb-10">
<h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Price Range</h2>
<div class="p-4 rounded-xl shadow-inner-neumorphism dark:shadow-inner-neumorphism-dark flex items-center justify-center">
<label for="price-range" class="sr-only">Price Range</label>
<input type="range" id="price-range" min="5" max="50" value="25" class="w-full h-3 rounded-full cursor-pointer
bg-purple-300 dark:bg-gray-700
accent-purple-600 dark:accent-indigo-400
shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-indigo-300
transition duration-200 ease-in-out
[&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:-mt-1.5
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-600 dark:[&::-webkit-slider-thumb]:bg-indigo-400
[&::-webkit-slider-thumb]:shadow-neumorphism dark:[&::-webkit-slider-thumb]:shadow-neumorphism-dark
[&::-webkit-slider-thumb]:appearance-none
[&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:-mt-1.5
[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-purple-600 dark:[&::-moz-range-thumb]:bg-indigo-400
[&::-moz-range-thumb]:shadow-neumorphism dark:[&::-moz-range-thumb]:shadow-neumorphism-dark
[&::-moz-range-thumb]:appearance-none
">
</div>
<div class="mt-2 flex justify-between text-sm text-gray-600 dark:text-gray-400">
<span>$5</span>
<span>$50</span>
</div>
</div>
<!-- Dietary Preferences / Multiple Choice -->
<div class="mb-10">
<h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Dietary Preferences</h2>
<div class="flex flex-wrap gap-4">
<!-- Checkbox 1 -->
<div class="neumorphism-checkbox">
<input type="checkbox" id="vegan" class="sr-only">
<label for="vegan" class="neumorphism-checkbox-label group">
<div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
flex items-center justify-center
group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
relative
">
<svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Vegan</span>
</label>
</div>
<!-- Checkbox 2 -->
<div class="neumorphism-checkbox">
<input type="checkbox" id="gluten-free" class="sr-only">
<label for="gluten-free" class="neumorphism-checkbox-label group">
<div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
flex items-center justify-center
group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
relative
">
<svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Gluten-Free</span>
</label>
</div>
<!-- Checkbox 3 -->
<div class="neumorphism-checkbox">
<input type="checkbox" id="vegetarian" class="sr-only">
<label for="vegetarian" class="neumorphism-checkbox-label group">
<div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
flex items-center justify-center
group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
relative
">
<svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
<span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Vegetarian</span>
</label>
</div>
</div>
</div>
<!-- Quantity Selector / Spinner (Conceptual) -->
<div class="mb-10 flex items-center justify-between">
<h2 class="text-2xl font-bold text-purple-700 dark:text-indigo-400">Quantity:</h2>
<div class="flex items-center space-x-4 p-2 rounded-full
shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
bg-purple-100 dark:bg-gray-800">
<button aria-label="Decrease quantity" class="neumorphism-button-icon-round">
<svg class="w-6 h-6 text-purple-600 dark:text-indigo-300" 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="M18 12H6"></path>
</svg>
</button>
<span class="text-2xl font-bold text-indigo-700 dark:text-purple-400">1</span> <!-- This would be dynamic -->
<button aria-label="Increase quantity" class="neumorphism-button-icon-round">
<svg class="w-6 h-6 text-purple-600 dark:text-indigo-300" 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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
</button>
</div>
</div>
<!-- Call to Action Buttons -->
<div class="flex flex-col sm:flex-row gap-6 mt-12 justify-center">
<button class="neumorphism-button-lg bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700
active:bg-pink-700 dark:active:bg-pink-800
text-white">
<svg class="w-6 h-6 mr-2" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
Add to Cart
</button>
<button class="neumorphism-button-lg bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:hover:bg-yellow-600
active:bg-yellow-600 dark:active:bg-yellow-700
text-gray-900">
<svg class="w-6 h-6 mr-2" 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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
Checkout Now
</button>
</div>
<p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-12">
Experience the soft magic of Neumorphism with vibrant flavors!
</p>
</div>
<!-- Tailwind JIT custom classes for Neumorphism -->
<style>
/* Base Neumorphism Shadows */
.shadow-neumorphism {
box-shadow: 6px 6px 12px #b0c4e7, -6px -6px 12px #e0f0ff;
}
.dark .shadow-neumorphism {
box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
}
.shadow-neumorphism-sm {
box-shadow: 3px 3px 6px #b0c4e7, -3px -3px 6px #e0f0ff;
}
.dark .shadow-neumorphism-sm {
box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
}
/* Inner Neumorphism Shadows (for pressed/active states) */
.shadow-inner-neumorphism {
box-shadow: inset 3px 3px 6px #9aaed1, inset -3px -3px 6px #f6ffff;
}
.dark .shadow-inner-neumorphism {
box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
}
.shadow-inner-neumorphism-sm {
box-shadow: inset 2px 2px 4px #9aaed1, inset -2px -2px 4px #f6ffff;
}
.dark .shadow-inner-neumorphism-sm {
box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
}
/* Specific Component Styles */
.category-button {
@apply flex flex-col items-center p-4 rounded-2xl cursor-pointer select-none
bg-purple-100 dark:bg-gray-800
shadow-neumorphism dark:shadow-neumorphism-dark
transform transition-all duration-200
hover:-translate-y-1 hover:shadow-lg dark:hover:shadow-lg-dark
active:shadow-inner-neumorphism dark:active:shadow-inner-neumorphism-dark
active:translate-y-0.5;
}
.dark .category-button {
box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
}
.dark .category-button:hover {
box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
}
.dark .category-button:active {
box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
}
/* General Button Style */
.neumorphism-button-lg {
@apply flex items-center justify-center px-8 py-4 rounded-full font-bold text-xl
shadow-neumorphism dark:shadow-neumorphism-dark
transform transition-all duration-200
hover:-translate-y-1 hover:scale-105 hover:shadow-lg dark:hover:shadow-lg-dark
active:shadow-inner-neumorphism dark:active:shadow-inner-neumorphism-dark
active:translate-y-0.5 active:scale-98;
white-space: nowrap; /* Prevent text wrapping */
}
.dark .neumorphism-button-lg {
box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
}
.dark .neumorphism-button-lg:hover {
box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
}
.dark .neumorphism-button-lg:active {
box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
}
/* Round Icon Button */
.neumorphism-button-icon-round {
@apply p-3 rounded-full
shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
bg-purple-200 dark:bg-gray-700
transform transition-all duration-200
hover:scale-110 hover:-translate-y-0.5
active:shadow-inner-neumorphism-sm dark:active:shadow-inner-neumorphism-sm-dark
active:translate-y-0.5 active:scale-95;
}
.dark .neumorphism-button-icon-round {
box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
}
.dark .neumorphism-button-icon-round:hover {
box-shadow: 4px 4px 8px #1a1a22, -4px -4px 8px #414151;
}
.dark .neumorphism-button-icon-round:active {
box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
}
/* Checkbox Styles */
.neumorphism-checkbox-label {
@apply flex items-center cursor-pointer select-none;
}
.neumorphism-checkbox input[type="checkbox"]:focus + .neumorphism-checkbox-label div {
@apply ring-2 ring-purple-400 dark:ring-indigo-300 ring-offset-2 ring-offset-purple-50 dark:ring-offset-gray-900;
}
/* Dark Mode specific shadows that Tailwind doesn't allow for custom properties within theme easily */
.dark\:shadow-neumorphism-dark {
box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
}
.dark\:shadow-neumorphism-sm-dark {
box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
}
.dark\:shadow-inner-neumorphism-dark {
box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
}
.dark\:shadow-inner-neumorphism-sm-dark {
box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
}
.dark\:hover\:shadow-lg-dark {
box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
}
/* Custom text shadow */
.text-shadow-md {
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.dark .text-shadow-md {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
</div>