Glassmorphism 検索ボックス コンポーネント
パステルカラーを使用したすりガラス効果(glassmorphism)を備えた最新の検索ボックスコンポーネント。コンポーネントはシンプルですがエレガントで、プロのビジネスWebサイト向けに設計されています。微妙なぼかし効果を備えた半透明の背景、レスポンシブデザイン、ダークモードのサポートが特徴です。検索ボックスには、検索アイコンと、企業環境に適したクリーンな入力フィールドが含まれています。
HTMLコード
<!-- Glassmorphism Search Box Component -->
<div class="w-full max-w-md mx-auto px-4">
<!-- Search Container with Glassmorphism Effect -->
<div class="relative backdrop-blur-sm bg-white/40 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 flex items-center shadow-lg transition-all duration-300 hover:shadow-xl">
<!-- Search Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<!-- Search Input -->
<input
type="text"
placeholder="Search..."
class="w-full bg-transparent border-none focus:ring-0 focus:outline-none ml-2 text-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
>
<!-- Optional Clear Button -->
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Optional Hint Text -->
<div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
Search for products, services, or information
</div>
</div>