Компоненты Значки Компонент «Бейджи»

Компонент «Бейджи»

Простой компонент значков в стиле Glassmorphism для социальных сетей, с эффектами матового стекла с размытием, аналогичными цветами и поддержкой темного режима с использованием Tailwind CSS. Он адаптивный и использует picsum.photos для изображений и randomuser.me для аватаров, где это необходимо. JavaScript не включен.

Предварительный просмотр

HTML-код

<div class="flex flex-wrap gap-2 p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-20">
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-indigo-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-indigo-700 dark:text-gray-200">
    #SocialLife
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-purple-700 dark:text-gray-200">
    #Connections
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-500 text-white bg-opacity-70 backdrop-filter backdrop-blur-sm dark:bg-blue-700 dark:text-gray-200">
    #Community
  </span>
</div>

Связанные компоненты

Компонент значков товаров электронной коммерции

Сложный компонент значков товаров электронной коммерции с интенсивным использованием цветовых градиентов из лесной/зеленой палитры, плавными переходами и адаптивным дизайном с поддержкой темного режима. Подходит для демонстрации статуса товара, предложений или категорий.

Открытый