Tailwind CSS Stat Components

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="p-5 bg-white rounded-lg shadow-md">
    <div class="flex justify-between">
      <div>
        <div class="text-sm font-medium text-gray-500">Total Likes</div>
        <div class="text-3xl font-bold text-blue-600 mt-1">25.6K</div>
        <div class="text-sm text-gray-500 flex items-center mt-1">
          <svg class="w-4 h-4 text-green-500 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
          </svg>
          21% more than last month
        </div>
      </div>
      <div class="text-blue-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
      </div>
    </div>
  </div>
  
  <div class="p-5 bg-white rounded-lg shadow-md">
    <div class="flex justify-between">
      <div>
        <div class="text-sm font-medium text-gray-500">Page Views</div>
        <div class="text-3xl font-bold text-purple-600 mt-1">2.6M</div>
        <div class="text-sm text-gray-500 flex items-center mt-1">
          <svg class="w-4 h-4 text-green-500 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
          </svg>
          21% more than last month
        </div>
      </div>
      <div class="text-purple-600">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
        </svg>
      </div>
    </div>
  </div>
  
  <div class="p-5 bg-white rounded-lg shadow-md">
    <div class="flex justify-between">
      <div>
        <div class="text-sm font-medium text-gray-500">Tasks Done</div>
        <div class="text-3xl font-bold text-gray-900 mt-1">86%</div>
        <div class="text-sm text-purple-600 mt-1">
          31 tasks remaining
        </div>
      </div>
      <div class="relative">
        <div class="w-12 h-12 rounded-full overflow-hidden bg-gray-200">
          <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200" alt="User" class="w-full h-full object-cover" />
        </div>
        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
      </div>
    </div>
  </div>
</div> 
                        

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <div class="bg-white rounded-lg shadow-md p-5 border border-gray-200">
    <div class="text-sm font-medium text-gray-500">Account balance</div>
    <div class="text-3xl font-bold text-gray-900 mt-1">$89,400</div>
    <div class="mt-4">
      <button class="px-3 py-1 bg-green-600 text-white text-xs font-medium rounded hover:bg-green-700 transition-colors">
        Add funds
      </button>
    </div>
  </div>
  
  <div class="bg-white rounded-lg shadow-md p-5 border border-gray-200">
    <div class="text-sm font-medium text-gray-500">Current balance</div>
    <div class="text-3xl font-bold text-gray-900 mt-1">$89,400</div>
    <div class="mt-4 flex space-x-2">
      <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded hover:bg-gray-200 transition-colors">
        Withdrawal
      </button>
      <button class="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded hover:bg-gray-200 transition-colors">
        Deposit
      </button>
    </div>
  </div>
</div> 
                        

                            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
  <div class="bg-white rounded-lg shadow-md p-5">
    <div class="text-sm font-medium text-gray-500">Downloads</div>
    <div class="text-3xl font-bold text-gray-900 mt-1">31K</div>
    <div class="text-sm text-gray-500 mt-1">Jan 1st - Feb 1st</div>
  </div>
  
  <div class="bg-white rounded-lg shadow-md p-5">
    <div class="text-sm font-medium text-gray-500">New Users</div>
    <div class="text-3xl font-bold text-gray-900 mt-1">4,200</div>
    <div class="text-sm text-gray-500 flex items-center mt-1">
      <svg class="w-4 h-4 text-green-500 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
      </svg>
      400 (22%)
    </div>
  </div>
  
  <div class="bg-white rounded-lg shadow-md p-5">
    <div class="text-sm font-medium text-gray-500">New Registers</div>
    <div class="text-3xl font-bold text-gray-900 mt-1">1,200</div>
    <div class="text-sm text-gray-500 flex items-center mt-1">
      <svg class="w-4 h-4 text-red-500 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M12 13a1 1 0 100 2h5a1 1 0 001-1V9a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z" clip-rule="evenodd" />
      </svg>
      90 (14%)
    </div>
  </div>
</div> 
                        

                            <div class="p-5 bg-white rounded-lg shadow-md">
  <div class="text-sm font-medium text-gray-500">Total Page Views</div>
  <div class="text-4xl font-bold text-gray-900 mt-1">89,400</div>
  <div class="text-sm text-gray-500 flex items-center mt-1">
    <svg class="w-4 h-4 text-green-500 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z" clip-rule="evenodd" />
    </svg>
    21% more than last month
  </div>
</div>