3D Progress Bar Component
A responsive progress bar component designed for social networking interfaces, featuring a 3D effect, monochromatic color scheme, and dark mode support, built using Tailwind CSS.
HTML Code
<div class="flex flex-col items-center py-10">
<div class="w-full max-w-md">
<div class="flex justify-between mb-2">
<span class="text-gray-700 dark:text-gray-300">Progress</span>
<span class="text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="absolute bg-blue-600 dark:bg-blue-300 h-full rounded-full transition-all duration-300 ease-in-out" style="width: 75%; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2);"></div>
</div>
</div>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-full border border-gray-300 dark:border-gray-600 shadow-md">
</div>
<div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">Some description about the progress being tracked.</div>
</div>Related Components
Progress Bar Component
A responsive progress bar component designed with 3D elements, using an analogous color scheme suitable for e-commerce, featuring dark mode support
Skeuomorphic Progress Bar
Skeuomorphic progress bar component for portfolios, featuring a monochromatic color scheme and complex, interactive design with responsive and dark mode support using Tailwind CSS.
Neumorphism Progress Bar
A responsive neumorphism-styled progress bar component designed for dashboards, incorporating an interactive feature and supporting dark mode.