Компонент поля поиска
Компонент окна поиска, разработанный в скевоморфном стиле, имитирующем реальное окно поиска, с использованием триадической цветовой схемы, подходит для портфолио и отзывчив с поддержкой темного режима.
HTML-код
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..."
class="w-full p-4 pl-10 pr-4 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-lg shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-700"/>
<div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600">
<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="M11 4a7 7 0 100 14 7 7 0 000-14zM16.293 16.293a8 8 0 111.414-1.414l4.281 4.283-1.414 1.414-4.282-4.283z" />
</svg>
</div>
</div>
</div>Связанные компоненты
Компонент поля поиска
Компонент поля поиска с 3D-дизайном, адаптивными эффектами и поддержкой темных тем.
Компонент поля поиска
Сложный компонент поискового окна, выполненный в стиле брутализма с пастельной цветовой гаммой, адаптированный для интерфейсов социальных сетей. Компонент включает в себя интерактивные элементы, такие как ввод поиска, фильтры и кнопка отправки, все они поддерживают темный режим.
Компонент поля поиска
Простой компонент окна поиска в стиле ретро/винтаж, предназначенный для блога или потребления контента. Он использует монохроматическую цветовую схему и является адаптивным с поддержкой темных тем.