CCHub Logo CCHub Tailwind Collection
구성 요소 검색창 레트로 빈티지 검색창

레트로 빈티지 검색창

레트로/빈티지 미학으로 스타일링된 반응형 검색 상자 구성 요소로, 소셜 미디어 인터페이스에 적합한 유사한 색 구성표를 사용하며 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex justify-center items-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-900 dark:to-pink-800 rounded-lg shadow-lg mt-10">
    <input type="text" placeholder="Search..." class="w-80 p-3 border-2 border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:border-purple-700 dark:bg-gray-800 dark:text-white dark:focus:ring-pink-600">
    <button class="ml-2 p-3 bg-yellow-400 text-white rounded-lg font-semibold hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
        <img src="https://picsum.photos/20/20" alt="Search Icon" class="inline"> Search
    </button>
</div>

<div class="flex justify-center items-center mt-3">
    <img src="https://picsum.photos/200/100" alt="Search Illustration" class="rounded-md shadow-md">
</div>

<div class="mt-5 text-center">
    <div class="flex items-center justify-center">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md">
        <p class="ml-2 text-lg text-gray-800 dark:text-gray-200">User Name</p>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Search for something amazing...</p>
</div>

관련 구성 요소

Glassmorphism 검색 상자 구성 요소

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

열다

Skeuomorphic Search Box 컴포넌트

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

열다

검색 상자 구성 요소

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

열다