스큐어모픽 프로그레스 바
포트폴리오를 위한 스큐어모픽 프로그레스 바 구성 요소로, 단색 색 구성표와 Tailwind CSS를 사용하여 반응형 및 다크 모드를 지원하는 복잡한 인터랙티브 디자인을 특징으로 합니다.
HTML 코드
<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>
관련 구성 요소
Progress Bar 구성 요소
정부/공공 서비스를 위한 복잡하고 반응이 빠른 진행률 표시줄 구성 요소로, 단색 팔레트와 밝은 액센트가 있는 깔끔하고 미니멀한 디자인, 다크 모드 지원 및 자세한 진행률 정보를 특징으로 합니다.
다크 모드 프로그레스 바(Dark Mode Progress Bar)
Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 세련된 디자인과 어두운 테마 지원을 특징으로 합니다.
머티리얼 디자인 흙빛 진행률 표시줄
머티리얼 디자인에서 영감을 받은 어스 톤의 진행률 표시줄로, 소셜 미디어 인터페이스에 적합합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.