검색 상자 구성 요소
실제 검색 상자를 모방하기 위해 스큐어모픽 스타일로 설계된 검색 상자 구성 요소로, 포트폴리오에 적합하고 다크 모드 지원으로 반응하는 트라이어드 색 구성표를 사용합니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..."
class="w-full p-4 pl-10 pr-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700"/>
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600">
<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="M11 4a7 7 0 100 14 7 7 0 000-14zM16.293 16.293a8 8 0 111.414-1.414l4.281 4.283-1.414 1.414-4.282-4.283z" />
</svg>
</div>
</div>
</div>관련 구성 요소
머티리얼 디자인 검색창
머티리얼 디자인 원칙에서 영감을 받은 검색창 구성요소로, Tailwind CSS를 사용하여 빌드되었습니다. 컨테이너 너비에 적응하는 반응형 동작, 호버 및 포커스 그림자 전환(깊이 효과)을 통한 시각적 피드백, 포괄적인 어두운 테마 지원을 제공합니다. 이 구성 요소에는 주요 검색 아이콘이 포함되어 있으며 깨끗하고 현대적인 미학을 보장합니다. CSS 전용 구현. 'w-full' 특성으로 인해 다양한 레이아웃에 임베딩하는 데 이상적입니다. 접근성을 위해 'input' 요소를 해당 ''와 페어링<label>하거나 설명이 포함된 'aria-label'을 제공해야 합니다.
Neon_Glow_Search_Box
다크 모드 지원을 포함하여 기술/SaaS 애플리케이션을 위한 일렉트릭 블루와 핫 핑크를 특징으로 하는 네온 글로우 효과가 있는 간단하고 반응이 빠른 검색 상자 구성 요소입니다.