Компонент «Индикаторы прогресса»
Простой компонент индикаторов прогресса, вдохновленный ретро/винтажной эстетикой 80-х и 90-х годов, с использованием дополнительной цветовой схемы. Разработан для интерфейсов социальных сетей и отзывчив с поддержкой темных тем.
HTML-код
<div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
<div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
<div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
</div>
<div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
<span>0%</span>
<span>70%</span>
</div>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
<div class="ml-3">
<p class="text-md text-white">User Name</p>
<p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
</div>
</div>
<p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
<img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>Связанные компоненты
Компонент индикаторов прогресса
Отзывчивый компонент индикаторов прогресса, разработанный для панели мониторинга пользовательского интерфейса в темном режиме с аналогичной цветовой схемой. Он включает в себя различные индикаторы прогресса, такие как полосы, круги и лента активности, все они стилизованы под Tailwind CSS для поддержки темного режима. JavaScript не используется.
Компонент индикаторов прогресса
Компонент индикатора прогресса в стиле стекломорфизма для приложений социальных сетей с полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия. Он использует аналогичную цветовую схему и предлагает сложный, насыщенный интерфейс с множеством интерактивных элементов. Компонент является адаптивным и поддерживает темную тему с Tailwind CSS.
Компонент 3D-индикатора выполнения
Стилизован с помощью 3D-эффектов, Tailwind CSS, адаптивного дизайна и поддержки темного режима.