Компонент поля поиска
Простой компонент окна поиска, разработанный для интерфейсов социальных сетей с поддержкой темного режима и дополнительной цветовой схемой.
HTML-код
<div class="flex justify-center items-center p-4 bg-gray-800 dark:bg-gray-900">
<input type="text" placeholder="Search..." class="w-full max-w-md p-2 border-2 border-blue-500 dark:border-blue-300 rounded-lg bg-gray-700 dark:bg-gray-800 text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:border-blue-400 dark:focus:border-blue-200">
<button class="ml-2 p-2 bg-blue-500 dark:bg-blue-600 rounded-lg text-white hover:bg-blue-400 dark:hover:bg-blue-500 focus:outline-none">Search</button>
</div>
Связанные компоненты
Компонент окна поиска стекломорфизма
Современный компонент окна поиска с эффектом матового стекла (стекломорфизм) с использованием пастельных тонов. Компонент простой, но элегантный, предназначен для профессиональных бизнес-сайтов. Он отличается полупрозрачным фоном с тонкими эффектами размытия, адаптивным дизайном и поддержкой темного режима. Окно поиска включает в себя значок поиска и чистое поле ввода, которое хорошо подходит для корпоративной среды.
Окно поиска по дизайну материалов
Компонент Search Box, вдохновленный принципами Material Design, созданный с использованием Tailwind CSS. Он отличается отзывчивым поведением, адаптирующимся к ширине контейнера, визуальной обратной связью с помощью переходов теней при наведении и фокусе (эффекты глубины), а также полной поддержкой темных тем. Компонент включает в себя ведущий значок поиска и обеспечивает чистую современную эстетику. Реализация только CSS. Идеально подходит для встраивания в различные макеты благодаря своей природе «w-full». Для обеспечения специальных возможностей убедитесь, что элемент 'input' соединен с соответствующим '<label>' или предоставьте описательный 'aria-label'.
Компонент поля поиска
Компонент окна поиска с интерфейсом темного режима, монохроматической цветовой схемой и умеренной сложностью для социальных сетей с использованием Tailwind CSS. Адаптивный дизайн с поддержкой темных тем.