Neon_Glow_Food_Container
鮮やかなネオン/グロー効果とダークモードのサポートを備えた、食品/レストランのWebサイト向けのシンプルでレスポンシブなコンテナコンポーネント。
HTMLコード
<div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 dark:bg-gray-950 font-sans">
<div class="relative w-full max-w-md mx-auto bg-white rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 ease-in-out hover:scale-105
dark:bg-gray-800 dark:shadow-purple-500/50 dark:hover:shadow-purple-400/70
border border-transparent dark:border-purple-600/50">
<!-- Glowing Border Effect (Simulated) -->
<div class="absolute inset-0 rounded-xl pointer-events-none
bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 opacity-20 blur-xl dark:opacity-30">
</div>
<div class="absolute inset-0 rounded-xl pointer-events-none
bg-gradient-to-br from-purple-500 via-pink-600 to-red-600 opacity-10 blur-lg dark:opacity-20">
</div>
<div class="relative p-6 sm:p-8 z-10">
<div class="text-center mb-6">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-2
dark:text-white dark:drop-shadow-[0_0_5px_rgba(255,0,255,0.7)]">
Taste the Future
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 dark:drop-shadow-[0_0_2px_rgba(0,255,255,0.5)]">
Your next favorite meal is just a click away.
</p>
</div>
<div class="relative w-full h-48 sm:h-56 mb-6 rounded-lg overflow-hidden shadow-lg
border-2 border-violet-400 dark:border-pink-500
transform transition-all duration-300 ease-in-out hover:scale-[1.02]">
<img src="https://picsum.photos/600/400?random=1" alt="Delicious Food" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 to-transparent flex items-end p-4">
<p class="text-white text-lg font-bold drop-shadow-[0_0_5px_rgba(0,255,255,0.9)]">Today's Special</p>
</div>
</div>
<p class="text-gray-700 leading-relaxed text-center mb-6 dark:text-gray-300">
Explore a vibrant selection of dishes, crafted with passion and precision. From local delights to international cuisines, we bring the best to your doorstep.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
bg-gradient-to-r from-purple-600 to-pink-600 text-white
shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-0.5
focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-pink-500/70
dark:from-purple-700 dark:to-pink-700 dark:shadow-purple-500/40 dark:hover:shadow-purple-400/60
relative overflow-hidden group">
<span class="relative z-10">Order Now</span>
<span class="absolute top-0 left-0 w-full h-full rounded-full bg-white opacity-0 blur group-hover:opacity-20 group-hover:animate-ping-slow"></span>
</button>
<button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
border-2 border-purple-500 text-purple-600
dark:border-pink-500 dark:text-pink-400
hover:bg-purple-50 hover:border-purple-600
dark:hover:bg-gray-700 dark:hover:border-pink-600
transition-all duration-300 ease-in-out transform hover:-translate-y-0.5
focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-pink-500/70">
View Menu
</button>
</div>
</div>
</div>
</div>
関連コンポーネント
ソーシャル メディア スキューモーフィック コンテナ
モノクロスキームで設計されたスキューモーフィックなソーシャルメディアコンテナで、ソフトシャドウ、微妙なグラデーション、丸みを帯びたエッジが特徴で、ボタンやカードなどの現実世界の要素を模倣し、ユーザーの投稿やプロフィールを表示するのに適しています。完全な応答性とダークモードのサポートが含まれています。