CCHub Logo CCHub Tailwind Collection
구성 요소 검색창 간단한 3D 파스텔 검색 상자

간단한 3D 파스텔 검색 상자

3D와 유사한 디자인, 파스텔 색 구성표 및 어두운 테마 지원을 갖춘 반응형 검색 상자 구성 요소로, 블로그/콘텐츠 웹 사이트용 Tailwind CSS로 구축되었습니다.

미리 보기

HTML 코드 

<body>
  <div class="min-h-screen bg-gradient-to-br from-pastel-pink-200 to-pastel-blue-200 dark:from-pastel-purple-900 dark:to-pastel-teal-900 p-8">
    <div class="max-w-md mx-auto">

      <!-- Simple Search Box -->
      <div class="relative transform translate-z-0 group">
        <input type="text" placeholder="Search..." class="w-full px-6 py-3 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-pastel-green-400 dark:focus:ring-pastel-teal-600 transition-all transform origin-center group-hover:-translate-y-1 group-hover:shadow-lg">
        <div class="absolute inset-0 border-2 border-pastel-green-400 dark:border-pastel-teal-600 rounded-lg pointer-events-none transform translate-z-0 group-hover:-translate-y-1"></div>
        <svg class="absolute right-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-400 dark:text-gray-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

    </div>
  </div>
</body>

관련 구성 요소

검색 상자 구성 요소

어두운 테마 지원, 어스 톤 색 구성표 및 최소한의 디자인을 갖춘 반응형 검색 상자 구성 요소입니다.

열다

Glassmorphism 검색 상자 구성 요소

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

열다

Glassmorphism 검색 상자 구성 요소

블로그 또는 콘텐츠 사이트에 적합한 회색조의 반응형 glassmorphism 스타일 검색 상자 구성 요소로, 젖빛 유리와 같은 반투명 입력 및 버튼이 특징입니다. 다크 모드 지원이 포함됩니다.

열다