Окно поиска по дизайну материалов
Компонент Search Box, вдохновленный принципами Material Design, созданный с использованием Tailwind CSS. Он отличается отзывчивым поведением, адаптирующимся к ширине контейнера, визуальной обратной связью с помощью переходов теней при наведении и фокусе (эффекты глубины), а также полной поддержкой темных тем. Компонент включает в себя ведущий значок поиска и обеспечивает чистую современную эстетику. Реализация только CSS. Идеально подходит для встраивания в различные макеты благодаря своей природе «w-full». Для обеспечения специальных возможностей убедитесь, что элемент 'input' соединен с соответствующим '<label>' или предоставьте описательный 'aria-label'.
HTML-код
<!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
<div class="pl-4 pr-2 py-3">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input
type="search"
name="search_query"
id="material_search_box_input"
placeholder="Search..."
aria-label="Search"
class="
appearance-none
w-full h-12
pl-0 pr-4 py-3
text-base text-gray-900 dark:text-gray-100
bg-transparent
focus:outline-none
placeholder-gray-500 dark:placeholder-gray-400
"
/>
</div>
<!-- Component End -->Связанные компоненты
Компонент поля поиска
Простой компонент окна поиска, разработанный для интерфейсов социальных сетей с поддержкой темного режима и дополнительной цветовой схемой.
Компонент поля поиска
Адаптивный компонент Search Box с поддержкой темной темы, цветовой гаммой Earth tones и минималистичным дизайном.
Компонент поля поиска
Адаптивное окно поиска с поддержкой темного режима с использованием Tailwind CSS.