Индикатор выполнения в темном режиме
Отзывчивый компонент индикатора выполнения, разработанный для темного режима с использованием Tailwind CSS, отличается элегантным дизайном и поддержкой темных тем.
HTML-код
<div class="bg-gray-800 rounded-lg p-4 w-full">
<h3 class="text-white text-lg font-semibold mb-2">Progress Bar</h3>
<div class="relative pt-1">
<div class="flex mb-2 items-center justify-between">
<div>
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
70%
</span>
</div>
<div class="text-right">
<span class="text-xs font-semibold inline-block text-teal-600">
Completed
</span>
</div>
</div>
<div class="flex h-2 mb-4 rounded bg-gray-700">
<div class="w-7/12 h-full bg-teal-600 rounded"></div>
</div>
</div>
<div class="mt-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600 mr-2">
<span class="text-white text-sm">John Doe</span>
</div>
</div>
Связанные компоненты
Индикатор выполнения
Компонент индикатора выполнения с микровзаимодействиями. Включает в себя адаптивные эффекты и поддержку темной темы с использованием только HTML и CSS (Tailwind CSS).
Компонент индикатора выполнения
Адаптивный компонент индикатора выполнения, предназначенный для темного режима с пастельной цветовой гаммой, подходит для деловых/корпоративных сайтов.
Компонент индикатора выполнения
Отзывчивый компонент полосы прогресса, разработанный для темного режима с использованием Tailwind CSS, подходит для современных веб-приложений.