CCHub Logo CCHub Tailwind Collection
구성 요소 검색창 검색 상자 구성 요소

검색 상자 구성 요소

글래스모피즘 스타일로 설계된 반응형 검색 상자 구성 요소로, 다크 모드를 지원하고 전자 상거래 애플리케이션에 맞게 조정되었습니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="relative">
        <input type="text" placeholder="Search for products..." class="w-full md:w-96 p-4 border border-transparent rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-transparent focus:ring focus:ring-opacity-50 backdrop-blur-md bg-opacity-30 shadow-lg">
        <button class="absolute right-0 top-0 bottom-0 flex items-center px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded-r-lg border border-transparent backdrop-blur-md bg-opacity-30">
            <img src="https://picsum.photos/20/20" alt="search icon" class="w-5 h-5" />
        </button>
    </div>
</div>
<div class="mt-4 text-center text-gray-700 dark:text-gray-300">
    <h2 class="text-xl font-semibold">Explore Our Products</h2>
    <div class="flex justify-center mt-2 space-x-4">
        <img src="https://picsum.photos/200/100" alt="Product 1" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
        <img src="https://picsum.photos/200/100?random=1" alt="Product 2" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
        <img src="https://picsum.photos/200/100?random=2" alt="Product 3" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
    </div>
</div>

관련 구성 요소

머티리얼 디자인 검색창

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

열다

Bauhaus_Agriculture_Search_Box

농업/농업 웹사이트를 위한 반응형 검색창 구성 요소로, Bauhaus 원칙, 세피아/갈색 톤 및 다크 모드 지원으로 설계되었습니다.

열다

Neon_Glow_Search_Box

다크 모드 지원을 포함하여 기술/SaaS 애플리케이션을 위한 일렉트릭 블루와 핫 핑크를 특징으로 하는 네온 글로우 효과가 있는 간단하고 반응이 빠른 검색 상자 구성 요소입니다.

열다