스큐어모픽 검색창

실제 요소를 모방한 스큐어모픽 디자인의 검색 상자 구성 요소로, 응답성과 어두운 테마 지원을 특징으로 합니다.

미리 보기

HTML 코드

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md">
    <input type="text" class="p-4 pl-10 pr-4 text-gray-900 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-800 dark:text-white dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400" placeholder="Search..." />
    <svg class="absolute left-3 top-3 w-5 h-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm4 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16z" />
    </svg>
  </div>
</div>

관련 구성 요소

검색 상자 구성 요소

비즈니스 및 기업 웹 사이트를 위해 설계된 3D 스타일의 검색 상자 구성 요소로, 깊이, 대화형 요소 및 다크 모드를 지원하는 복잡한 인터페이스를 특징으로 합니다.

열다

검색 상자 구성 요소

반응형 디자인과 어두운 테마를 지원하는 다크 모드 검색 상자 구성 요소입니다. JavaScript는 사용되지 않습니다. 이미지는 자리 표시자 이미지입니다.

열다

머티리얼 디자인 검색창

머티리얼 디자인 원칙에서 영감을 받은 검색창 구성요소로, Tailwind CSS를 사용하여 빌드되었습니다. 컨테이너 너비에 적응하는 반응형 동작, 호버 및 포커스 그림자 전환(깊이 효과)을 통한 시각적 피드백, 포괄적인 어두운 테마 지원을 제공합니다. 이 구성 요소에는 주요 검색 아이콘이 포함되어 있으며 깨끗하고 현대적인 미학을 보장합니다. CSS 전용 구현. 'w-full' 특성으로 인해 다양한 레이아웃에 임베딩하는 데 이상적입니다. 접근성을 위해 'input' 요소를 해당 ''와 페어링<label>하거나 설명이 포함된 'aria-label'을 제공해야 합니다.

열다