Stat With Icons

                    <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>