Columns Component

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-purple-500 dark:border-purple-700
                hover:border-purple-600 dark:hover:border-purple-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400/30 via-pink-500/30 to-red-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-purple-700 dark:text-purple-400 mb-4 tracking-wide relative z-10">Sales Overview</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">Total sales increased by <span class="font-semibold text-green-500">+15%</span> this quarter. Dive into the details.</p>
      <div class="mt-6 p-4 rounded-md bg-purple-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-purple-600 dark:text-purple-300">Revenue: <span class="font-bold">$1.2M</span></p>
        <p class="text-sm text-purple-600 dark:text-purple-300">Units Sold: <span class="font-bold">8,500</span></p>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-indigo-500 dark:border-indigo-700
                hover:border-indigo-600 dark:hover:border-indigo-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 via-blue-500/30 to-cyan-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 mb-4 tracking-wide relative z-10">User Engagement</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">New users are up <span class="font-semibold text-blue-500">+8%</span>. See active user statistics.</p>
      <div class="mt-6 p-4 rounded-md bg-indigo-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-indigo-600 dark:text-indigo-300">Active Users: <span class="font-bold">25,000</span></p>
        <p class="text-sm text-indigo-600 dark:text-indigo-300">Bounce Rate: <span class="font-bold">35%</span></p>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition-all duration-300 hover:scale-105
                border-b-4 border-l-2 border-r-4 border-t-2 border-green-500 dark:border-green-700
                hover:border-green-600 dark:hover:border-green-800
                relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400/30 via-lime-500/30 to-yellow-500/30 opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 tracking-wide relative z-10">Revenue Projections</h2>
      <p class="text-gray-700 dark:text-gray-300 relative z-10">Projected growth of <span class="font-semibold text-orange-500">+12%</span> for the next quarter.</p>
      <div class="mt-6 p-4 rounded-md bg-green-50 dark:bg-gray-700/50 relative z-10">
        <p class="text-sm text-green-600 dark:text-green-300">Q3 Target: <span class="font-bold">$1.5M</span></p>
        <p class="text-sm text-green-600 dark:text-green-300">Confidence: <span class="font-bold">High</span></p>
      </div>
    </div>

  </div>
</div>