Stats

stats

<div class="bg-gray-200 py-10 px-5 mx-auto max-w-lg md:max-w-4xl lg:max-w-5xl w-full">
  <p class="text-gray-900 text-lg font-medium">Last 30 days</p>
  <div class="grid gap-5 grid-rows-3 md:grid-cols-3 md:grid-rows-1 mt-5">
    <div class="flex flex-col bg-white rounded-md shadow">
      <div class="py-5 flex items-center px-5">
        <div class="h-12 w-12 rounded-lg bg-indigo-700 items-center justify-center flex">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            class="text-white h-6 w-6 fill-current"
          >
            <path d="M9 12A5 5 0 1 1 9 2a5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2zm1-5a1 1 0 0 1 0-2 5 5 0 0 1 5 5v2a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3zm-2-4a1 1 0 0 1 0-2 3 3 0 0 0 0-6 1 1 0 0 1 0-2 5 5 0 0 1 0 10z"/>
          </svg>
        </div>
        <div class="flex flex-col ml-5">
          <span class="text-gray-600 font-medium text-sm">Total Subscribers</span>
          <div class="flex items-baseline">
            <span class="text-gray-900 font-semibold text-xl">71,897</span>
            <span class="text-green-500 ml-2 text-sm font-medium">&#8593;122</span>
          </div>
        </div>
      </div>
      <div class="bg-gray-100 py-2 px-5 rounded-b-md shadow flex-1">
        <span class="text-indigo-700 text-sm font-medium">View All</span>
      </div>
    </div>
    <div class="flex flex-col bg-white rounded-md shadow">
      <div class="py-5 flex items-center px-5">
        <div class="h-12 w-12 rounded-lg bg-indigo-700 items-center justify-center flex">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            class="text-white h-6 w-6 fill-current"
          >
            <path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2zm16 3.38V6H4v1.38l8 4 8-4zm0 2.24l-7.55 3.77a1 1 0 0 1-.9 0L4 9.62V18h16V9.62z"/>
          </svg>
        </div>
        <div class="flex flex-col ml-5">
          <span class="text-gray-600 font-medium text-sm">Avg. Open Rate</span>
          <div class="flex items-baseline">
            <span class="text-gray-900 font-semibold text-xl">58.16%</span>
            <span class="text-green-500 ml-2 text-sm font-medium">&#8593; 5.4%</span>
          </div>
        </div>
      </div>
      <div class="bg-gray-100 py-2 px-5 rounded-b-md shadow flex-1">
        <span class="text-indigo-700 text-sm font-medium">View All</span>
      </div>
    </div>
    <div class="flex flex-col bg-white rounded-md shadow">
      <div class="py-5 flex items-center px-5">
        <div class="h-12 w-12 rounded-lg bg-indigo-700 items-center justify-center flex">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            class="text-white h-6 w-6 fill-current"
          >
            <path d="M19 6.41L8.7 16.71a1 1 0 1 1-1.4-1.42L17.58 5H14a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-2 0V6.41zM17 14a1 1 0 0 1 2 0v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h5a1 1 0 0 1 0 2H5v12h12v-5z"/>
          </svg>

        </div>
        <div class="flex flex-col ml-5">
          <span class="text-gray-600 font-medium text-sm">Avg. Click Rate</span>
          <div class="flex items-baseline">
            <span class="text-gray-900 font-semibold text-xl">24.57</span>
            <span class="text-red-500 ml-2 text-sm font-medium">&#8595; 3.2%</span>
          </div>
        </div>
      </div>
      <div class="bg-gray-100 py-2 px-5 rounded-b-md shadow flex-1">
        <span class="text-indigo-700 text-sm font-medium">View All</span>
      </div>
    </div>
  </div>
</div>