Luxury_Grayscale_Social_Media_Progress_Bar
A complex, elegant, and responsive progress bar component for social media interfaces, featuring a grayscale luxury design with sophisticated typography and dark mode support.
HTML Code
<div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
<div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
<div class="p-6 sm:p-8 md:p-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-6 tracking-tight dark:text-white">Profile Completion</h2>
<p class="text-md sm:text-lg text-center text-gray-600 dark:text-gray-300 mb-8 max-w-xl mx-auto leading-relaxed">
Enhance your presence by completing your profile. The more complete it is, the more opportunities you'll discover.
</p>
<!-- Main Progress Bar -->
<div class="mb-10">
<div class="flex justify-between items-center mb-2">
<span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Overall Progress</span>
<span class="text-xl font-bold text-gray-900 dark:text-white">75%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden">
<div class="bg-gradient-to-r from-gray-600 to-gray-900 dark:from-gray-300 dark:to-gray-500 h-full rounded-full" style="width: 75%;"></div>
</div>
</div>
<!-- Detailed Steps -->
<div class="space-y-6">
<!-- Step 1: Basic Info -->
<div class="flex items-center space-x-4">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-900 dark:bg-gray-300 flex items-center justify-center">
<svg class="w-6 h-6 text-white dark:text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 9.354V10a5 5 0 00-10 0v9.354m0 0a5 5 0 00-10 0v-9.354"></path>
</svg>
</div>
<div class="flex-grow">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Basic Profile Information</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">100%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
<div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 100%;"></div>
</div>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<!-- Step 2: Professional Details -->
<div class="flex items-center space-x-4 opacity-75">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 4h2a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2m8 0h.01M6 16h.01"></path>
</svg>
</div>
<div class="flex-grow">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Professional & Experience</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">50%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
<div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 50%;"></div>
</div>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<!-- Step 3: Interests and Skills -->
<div class="flex items-center space-x-4 opacity-50">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"></path>
</svg>
</div>
<div class="flex-grow">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Interests & Skills</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">25%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
<div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 25%;"></div>
</div>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
<!-- Step 4: Social Links -->
<div class="flex items-center space-x-4 opacity-25">
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.102 1.101m-.757-4.898l-4 4a4 4 0 105.656 5.656l1.102-1.101"></path>
</svg>
</div>
<div class="flex-grow">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Social Media Links</h3>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">0%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
<div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 0%;"></div>
</div>
</div>
<button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</div>
</div>
<!-- Call to Action -->
<div class="mt-10 text-center">
<button class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-gray-900 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-300 ease-in-out
dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
Complete Your Profile
<svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</button>
</div>
</div>
<!-- Decorative Footer -->
<div class="p-4 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
<p>Your privacy is important to us. Information shared helps connect you with relevant opportunities.</p>
</div>
</div>
</div>Related Components
Skeuomorphic_Monochromatic_Progress_Bar
A moderate complexity skeumorphic progress bar component for e-commerce, featuring a monochromatic color scheme, full responsivity, and dark mode support.
Dark Mode Progress Bar
A responsive progress bar component designed for dark mode using Tailwind CSS, featuring a sleek design and dark theme 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.