가격 표시 구성 요소

<div class="flex flex-col min-h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center py-10">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="px-6 py-8">
      <h2 class="text-center text-4xl font-extrabold text-gray-900 dark:text-white mb-4">Pro Plan</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 text-lg mb-8">Elevate your experience with advanced features.</p>
      <div class="flex justify-center items-baseline mb-8">
        <span class="text-6xl font-extrabold text-indigo-600 dark:text-indigo-400">$29</span>
        <span class="text-2xl font-medium text-gray-500 dark:text-gray-400">/month</span>
      </div>
      <ul class="space-y-4 mb-8">
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Unlimited Projects</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Advanced Analytics</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">24/7 Priority Support</span>
        </li>
        <li class="flex items-center">
          <svg class="h-6 w-6 text-green-500 mr-3" 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 13l4 4L19 7"></path></svg>
          <span class="text-gray-700 dark:text-gray-200 text-lg">Custom Integrations</span>
        </li>
      </ul>
      <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
        Get Started
      </button>
    </div>
  </div>
</div>