Компонент всплывающей подсказки
Компонент всплывающей подсказки в стиле Neumorphism для демонстрации портфолио с поддержкой темного режима, адаптивным дизайном и использованием Tailwind CSS.
HTML-код
<div class="relative group">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg dark:shadow-none">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none p-4">
<h2 class="text-gray-800 dark:text-gray-200 font-semibold">Project Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the project or product showcased in the portfolio.</p>
</div>
</div>
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-3 text-center transition-all duration-300">
<p class="text-sm text-gray-800 dark:text-gray-200">More details about the project.</p>
<img src="https://picsum.photos/200/100" alt="Project Image" class="mt-2 rounded-lg shadow-md dark:shadow-none">
</div>
<div class="w-3 h-3 bg-white dark:bg-gray-800 absolute left-1/2 transform -translate-x-1/2 -bottom-1 rotate-45"></div>
</div>
</div>Связанные компоненты
Компонент всплывающей подсказки
Компонент всплывающей подсказки со стилем Скевоморфизм, Дополнительная цветовая схема, Простая сложность, для электронной коммерции.
Скевоморфный компонент всплывающей подсказки
Отзывчивый компонент всплывающей подсказки, разработанный со скевоморфизмом и яркими цветами, подходит для блогов и потребления контента. Он включает в себя поддержку темной темы с использованием Tailwind CSS.
Компонент всплывающей подсказки для микровзаимодействий
Простой, но привлекательный компонент всплывающих подсказок с тонкой анимацией микровзаимодействия, адаптивным дизайном и поддержкой темных тем, созданный с помощью Tailwind CSS. JavaScript не требуется.