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