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

Glassmorphism 검색 상자 구성 요소

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

미리 보기

HTML 코드 

<!-- Glassmorphism Search Box Component -->
<div class="w-full max-w-md mx-auto px-4">
  <!-- Search Container with Glassmorphism Effect -->
  <div class="relative backdrop-blur-sm bg-white/40 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 flex items-center shadow-lg transition-all duration-300 hover:shadow-xl">
    <!-- Search Icon -->
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <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" />
    </svg>
    
    <!-- Search Input -->
    <input 
      type="text" 
      placeholder="Search..." 
      class="w-full bg-transparent border-none focus:ring-0 focus:outline-none ml-2 text-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500"
    >
    
    <!-- Optional Clear Button -->
    <button class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-300 transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
  
  <!-- Optional Hint Text -->
  <div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
    Search for products, services, or information
  </div>
</div>

관련 구성 요소

검색 상자 구성 요소

Tailwind CSS를 사용하여 어두운 테마를 지원하는 브루탈리즘 스타일로 디자인된 반응형 검색 상자 구성 요소입니다.

열다

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

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

열다

검색 상자 구성 요소

파스텔 색조의 브루탈리즘 스타일로 디자인된 복잡한 검색 상자 구성 요소로, 소셜 미디어 인터페이스에 맞게 조정되었습니다. 구성 요소에는 검색 입력, 필터 및 제출 버튼과 같은 대화형 요소가 포함되어 있으며 모두 다크 모드를 지원합니다.

열다