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

검색 상자 구성 요소

블로그 또는 콘텐츠 소비를 위해 설계된 간단한 레트로/빈티지 스타일의 검색 상자 구성 요소입니다. 단색 색 구성표를 사용하며 어두운 테마 지원으로 반응합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 w-full max-w-md">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Search</h2>
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full px-4 py-2 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 border rounded-lg focus:outline-none focus:border-gray-500 dark:focus:border-gray-600" />
            <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                <button class="bg-blue-500 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">
                    <svg class="w-5 h-5" 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="M11 3a8 8 0 11-8 8 8 8 0 018-8z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

Skeuomorphic Search Box 컴포넌트

소셜 미디어용 스큐어모픽 검색창

열다

검색 상자 구성 요소

미니멀리스트/플랫 디자인, 생생한 색 구성표 및 복잡한 상호 작용을 갖춘 반응형 검색 상자 구성 요소로 비즈니스/기업 웹 사이트에 적합합니다. 다크 모드를 지원하며 Tailwind CSS로 구축되었습니다.

열다

Glassmorphism 검색 상자 구성 요소

파스텔 색상을 사용하는 젖빛 유리 효과(glassmorphism)가 있는 현대적인 검색 상자 구성 요소입니다. 구성 요소는 간단하지만 우아하며 전문 비즈니스 웹 사이트를 위해 설계되었습니다. 미묘한 흐림 효과, 반응형 디자인 및 다크 모드 지원이 있는 반투명 배경이 특징입니다. 검색 상자에는 검색 아이콘과 회사 환경에 잘 맞는 깨끗한 입력 필드가 포함되어 있습니다.

열다