Компонент облака тегов
Компонент облака тегов Neumorphic, разработанный для портфолио, демонстрирующий теги с монохроматической цветовой схемой, адаптивным макетом и поддержкой темного режима с использованием Tailwind CSS.
HTML-код
<div class="flex flex-col justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-neumorphism">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Tag Cloud</h2>
<div class="flex flex-wrap gap-4">
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Web Design</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">UI/UX</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Graphic Design</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Development</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Branding</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Photography</span>
</div>
<div class="mt-5 flex gap-4">
<img src="https://picsum.photos/50?random=1" alt="Image 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<img src="https://picsum.photos/50?random=2" alt="Image 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<img src="https://picsum.photos/50?random=3" alt="Image 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
</div>
</div>Связанные компоненты
Компонент облака тегов в стиле ар-деко
Отзывчивый компонент облака тегов, выполненный в эстетике ар-деко, с геометрическими узорами и роскошными синими тонами, подходит для интерфейсов социальных сетей. Включает поддержку темного режима.
Компонент облака тегов
Отзывчивый компонент облака тегов со стилями Material Design, дополнительной цветовой схемой и умеренной сложностью для целей электронной коммерции, с поддержкой темных тем.
Компонент облака тегов
Сложный компонент облака тегов на индустриальную тематику с осенними цветами, разработанный для веб-сайтов о сельском хозяйстве и фермерстве. Имеет несколько интерактивных элементов, полную отзывчивость и поддержку темных режимов.