검색 상자 구성 요소
Tailwind CSS를 사용하여 Brutalism 스타일로 디자인된 검색 상자 구성 요소입니다. 고대비 디자인, 반응형 효과가 특징이며 어두운 테마를 지원합니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg p-6 shadow-lg w-full max-w-md">
<h2 class="text-xl font-bold text-gray-800 dark:text-white text-center mb-4">Search</h2>
<div class="flex items-center border-b border-gray-300 dark:border-gray-700 mb-4">
<input type="text" placeholder="Type your search..." class="flex-1 bg-transparent text-gray-800 dark:text-white p-2 outline-none" />
<button class="p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-800 dark:hover:bg-blue-700 text-white rounded-r-lg">
<span>🔍</span>
</button>
</div>
<img src="https://picsum.photos/400/200" class="w-full rounded-lg shadow-md" alt="Random image" />
<div class="flex justify-between mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full" alt="User Avatar" />
</div>
<p class="text-gray-600 dark:text-gray-400 text-center mt-2">Explore and find information quickly.</p>
</div>
</div>