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>

관련 구성 요소

검색 상자 구성 요소

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

열다

자연에서 영감을 받은 유기농 검색창

자연에서 영감을 받은 유기적 디자인과 무지개 그라데이션이 있는 간단하고 반응이 빠른 검색 상자 구성 요소로 비즈니스 또는 기업 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Industrial_Food_Search_Box

음식/레스토랑 웹사이트를 위한 반응형 및 고대비 산업 스타일 검색 상자 구성 요소로, 노출된 요소, 다크 모드 지원 및 적당한 복잡성을 특징으로 합니다.

열다