가격 표시 구성 요소
포트폴리오를 위한 레트로 빈티지 스타일의 복합 가격 표시 구성 요소로, Tailwind CSS를 사용하여 트라이어딕 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다. JavaScript는 포함되어 있지 않습니다.
HTML 코드
<div class="bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center p-8">
<div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 rounded-lg shadow-lg p-8 max-w-sm w-full transform transition-all duration-500 hover:scale-105">
<div class="text-center mb-8">
<h2 class="text-3xl font-bold font-mono mb-2 text-teal-600 dark:text-teal-400">Pro Plan</h2>
<p class="text-gray-600 dark:text-gray-400">Level up your portfolio</p>
</div>
<div class="text-center mb-8">
<p class="text-5xl font-extrabold mb-2 text-purple-600 dark:text-purple-400">$29<span class="text-xl font-medium text-gray-500 dark:text-gray-300">/month</span></p>
<p class="text-sm text-gray-500 dark:text-gray-300">Billed Annually</p>
</div>
<ul class="mb-8 space-y-4">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Unlimited Projects
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
10GB Storage
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Custom Domain
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-orange-600 dark:text-orange-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
24/7 Support
</li>
</ul>
<button class="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 transform hover:scale-105">
Get Started
</button>
</div>
</div>