검색 상자 구성 요소
머티리얼 디자인 원칙에 따라 설계된 반응형 검색창 구성요소로, Tailwind CSS 스타일과 어두운 테마 지원을 제공합니다.
HTML 코드
<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 w-96">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 text-center">Search</h2>
<div class="relative">
<input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 transition duration-150 ease-in-out" />
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Search</button>
</div>
<div class="mt-4 text-center">
<h3 class="text-gray-700 dark:text-gray-300">Looking for something specific?</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm">Type and hit enter or click the search button.</p>
</div>
</div>
</div>