브루탈리스트 검색창
대시보드에 대한 잔인하고 야만적인 검색 상자 구성 요소로, 보색 구성표와 적당한 복잡성을 특징으로 하며, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.
HTML 코드
<div class="relative max-w-md mx-auto mt-10">
<input type="text" placeholder="Search..." class="w-full px-6 py-4 text-lg text-gray-800 bg-yellow-300 border-4 border-black focus:outline-none focus:border-red-600 dark:bg-yellow-600 dark:text-gray-200 dark:border-white dark:focus:border-red-800">
<svg class="absolute right-0 top-0 mt-4 mr-5 w-6 h-6 text-black dark:text-white" 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>관련 구성 요소
자연에서 영감을 받은 유기농 검색창
자연에서 영감을 받은 유기적 디자인과 무지개 그라데이션이 있는 간단하고 반응이 빠른 검색 상자 구성 요소로 비즈니스 또는 기업 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.
Glassmorphism 검색 상자 구성 요소
파스텔 색상을 사용하는 젖빛 유리 효과(glassmorphism)가 있는 현대적인 검색 상자 구성 요소입니다. 구성 요소는 간단하지만 우아하며 전문 비즈니스 웹 사이트를 위해 설계되었습니다. 미묘한 흐림 효과, 반응형 디자인 및 다크 모드 지원이 있는 반투명 배경이 특징입니다. 검색 상자에는 검색 아이콘과 회사 환경에 잘 맞는 깨끗한 입력 필드가 포함되어 있습니다.
게임 검색 상자 구성 요소
게임 웹사이트를 위한 반응형의 간단한 검색창 구성 요소로, 포레스트/그린 색상 팔레트와 다크 모드를 지원하는 Bauhaus 디자인 원칙에서 영감을 받았습니다.