インタラクティブコンポーネントコンポーネント
食品/レストランのWebサイト向けに設計された、鮮やかな配色を備えた複雑でインタラクティブなNeumorphismスタイルのコンポーネント。インタラクティブボタン、スライダー、選択要素が含まれており、ダークモードのサポートと完全な応答性を備えています。
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>関連コンポーネント
レトロなヴィンテージポートフォリオインタラクティブコンポーネント
グレースケールでレトロなヴィンテージをテーマにしたポートフォリオコンポーネントで、インタラクティブな要素があり、作品や製品の展示に適しています。レスポンシブデザインとダークモードのサポートが特徴です。
インタラクティブコンポーネントコンポーネント
Skeuomorphismデザイン、類似の配色、およびブログ/コンテンツの目的のための適度な複雑さを備えたインタラクティブコンポーネントコンポーネント。ダークテーマをサポートするレスポンシブデザイン。JavaScript コードはありません。