Простое окно для поиска 3D пастелью
Адаптивный компонент окна поиска с 3D-дизайном, пастельной цветовой гаммой и поддержкой темной темы, созданный с помощью Tailwind CSS для блога/контентного веб-сайта.
HTML-код
<body>
<div class="min-h-screen bg-gradient-to-br from-pastel-pink-200 to-pastel-blue-200 dark:from-pastel-purple-900 dark:to-pastel-teal-900 p-8">
<div class="max-w-md mx-auto">
<!-- Simple Search Box -->
<div class="relative transform translate-z-0 group">
<input type="text" placeholder="Search..." class="w-full px-6 py-3 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-pastel-green-400 dark:focus:ring-pastel-teal-600 transition-all transform origin-center group-hover:-translate-y-1 group-hover:shadow-lg">
<div class="absolute inset-0 border-2 border-pastel-green-400 dark:border-pastel-teal-600 rounded-lg pointer-events-none transform translate-z-0 group-hover:-translate-y-1"></div>
<svg class="absolute right-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-400 dark:text-gray-500 pointer-events-none" 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>
</div>
</div>
</body>Связанные компоненты
Компонент окна поиска стекломорфизма
Современный компонент окна поиска с эффектом матового стекла (стекломорфизм) с использованием пастельных тонов. Компонент простой, но элегантный, предназначен для профессиональных бизнес-сайтов. Он отличается полупрозрачным фоном с тонкими эффектами размытия, адаптивным дизайном и поддержкой темного режима. Окно поиска включает в себя значок поиска и чистое поле ввода, которое хорошо подходит для корпоративной среды.
Компонент поля поиска
Простой компонент окна поиска в стиле ретро/винтаж, предназначенный для блога или потребления контента. Он использует монохроматическую цветовую схему и является адаптивным с поддержкой темных тем.
Компонент поля поиска
Компонент поискового окна в 3D-стиле, разработанный для бизнес- и корпоративных сайтов, отличается сложным интерфейсом с глубиной, интерактивными элементами и поддержкой темного режима.