<div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
<div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-xl shadow-2xl-inner relative">
<div class="absolute inset-0 border-4 border-gray-400 dark:border-gray-600 rounded-xl pointer-events-none"></div>
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Project Progress</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm">Portfolio Showcase</p>
</div>
<div class="mb-8 relative">
<div class="h-8 bg-gray-400 dark:bg-gray-600 rounded-full shadow-inner-lg overflow-hidden relative">
<div class="absolute inset-y-0 left-0 w-3/4 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full shadow-lg transition-all duration-500 ease-out flex items-center justify-end pr-3"
style="width: 75%;">
<span class="text-white text-sm font-bold drop-shadow-md">75%</span>
</div>
<div class="absolute top-1/2 left-3/4 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white dark:bg-gray-200 rounded-full shadow-md border-2 border-blue-500 dark:border-blue-700"></div>
</div>
<div class="text-gray-700 dark:text-gray-300 text-right mt-2 text-sm">Completed</div>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div class="flex items-center space-x-2">
<div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
<span class="text-gray-700 dark:text-gray-300">Design Phase</span>
</div>
<div class="flex items-center space-x-2 justify-end">
<span class="text-gray-700 dark:text-gray-300">90%</span>
<div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
</div>
<div class="flex items-center space-x-2">
<div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
<span class="text-gray-700 dark:text-gray-300">Development</span>
</div>
<div class="flex items-center space-x-2 justify-end">
<span class="text-gray-700 dark:text-gray-300">70%</span>
<div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
</div>
<div class="flex items-center space-x-2">
<div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
<span class="text-gray-700 dark:text-gray-300">Testing</span>
</div>
<div class="flex items-center space-x-2 justify-end">
<span class="text-gray-700 dark:text-gray-300">50%</span>
<div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
</div>
</div>
<div class="mt-8 text-center">
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-6 rounded-full
shadow-lg hover:shadow-xl active:shadow-inner-lg transition-all duration-200
dark:bg-blue-700 dark:hover:bg-blue-800 dark:active:bg-blue-900">
View Details
</button>
</div>
</div>
</div>
<style>
/* Custom Utility Classes for Skeuomorphism */
.shadow-2xl-inner {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
}
.dark .shadow-2xl-inner {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
}
.shadow-inner-lg {
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
}
.dark .shadow-inner-lg {
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
}
.drop-shadow-md {
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}
</style>
