Скевоморфный компонент всплывающей подсказки
Сложный компонент всплывающих подсказок, выполненный в скевоморфном стиле и земляных тонах, подходит для приложений электронной коммерции с поддержкой темного режима.
HTML-код
<div class="relative group">
<img src="https://picsum.photos/200/200?random=1" alt="Product Image" class="w-40 h-40 rounded-lg shadow-lg">
<div class="absolute z-10 hidden group-hover:flex flex-col items-center p-4 bg-gray-800 bg-opacity-80 border border-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white mb-2">
<h3 class="text-lg text-earthgreen-200">Product Name</h3>
<p class="text-sm text-earthbrown-200">Brief description of the product goes here. It mimics wood and soil textures for an earthy feel.</p>
<div class="flex space-x-2 mt-2">
<span class="px-3 py-1 text-xs text-white bg-earthbrown-300 rounded-full">Add to Cart</span>
<span class="px-3 py-1 text-xs text-white bg-earthbrown-600 rounded-full">View More</span>
</div>
</div>
</div>Связанные компоненты
Компонент всплывающей подсказки
Простой адаптивный компонент всплывающей подсказки, предназначенный для потребления контента блога, с 3D-дизайном с цветовой схемой в оттенках серого и поддержкой темного режима с использованием Tailwind CSS.
Минималистичная подсказка
Минималистичный и плоский компонент всплывающих подсказок для блогов/контентных веб-сайтов с монохроматической цветовой гаммой и простым макетом. Он адаптивный и поддерживает темный режим с использованием Tailwind CSS.
Компонент всплывающей подсказки
Компонент всплывающей подсказки в стиле Neumorphism для демонстрации портфолио с поддержкой темного режима, адаптивным дизайном и использованием Tailwind CSS.