Price Display Component

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-full max-w-sm p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
    <div class="flex justify-between items-center">
      <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200">Pro Plan</h3>
      <span class="text-xl font-bold text-gray-600 dark:text-gray-300">$29</span>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mt-2 text-sm">billed monthly</p>
    <ul class="mt-4 space-y-2 text-gray-600 dark:text-gray-400">
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 text-green-500" 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>Unlimited projects</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 text-green-500" 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>10GB storage</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 text-green-500" 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>Priority support</span>
      </li>
    </ul>
    <button class="mt-6 w-full py-3 bg-blue-500 text-white rounded-md font-bold shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">
      Choose Plan
    </button>
  </div>
</div>

<style>
.shadow-xl {
  box-shadow: 10px 10px 20px #babecc, -10px -10px 20px #ffffff;
}
.dark .shadow-xl-dark {
  box-shadow: 10px 10px 20px #718096, -10px -10px 20px #4a5568;
}
</style>