Stats card with icons

Forked from @prashant/resonsive-card-grid-with-hover-animation

Improved Code quality and added support for dark mode

This tailwind example is contributed by Dika Rahman, on 02-Oct-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Card Stats

Author Dika Rahman

Tailwind v3.4 2.6k 4

Fork Fullscreen

<div
      class="flex flex-col w-full gap-2 p-4 text-center bg-white border-2 border-gray-600 rounded-lg shadow-lg dark:bg-gray-800">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="w-10 h-10 mx-auto text-violet-500 dark:text-violet-200">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
      </svg>
      <p class="text-3xl font-medium text-gray-900 dark:text-gray-300">400+</p>
      <p class="leading-relaxed dark:text-gray-400">Courses</p>
    </div>

<div
      class="flex flex-col w-full gap-2 p-4 text-center bg-white border-2 border-gray-600 rounded-lg shadow-lg dark:bg-gray-800">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="w-10 h-10 mx-auto text-violet-500 dark:text-violet-200">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
      </svg>
      <p class="text-3xl font-medium text-gray-900 dark:text-gray-300">4k</p>
      <p class="leading-relaxed dark:text-gray-400">Topics</p>
    </div>

<div
      class="flex flex-col w-full gap-2 p-4 text-center bg-white border-2 border-gray-600 rounded-lg shadow-lg dark:bg-gray-800">
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        class="w-10 h-10 mx-auto text-violet-500 dark:text-violet-200" viewBox="0 0 24 24">
        <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path>
        <circle cx="9" cy="7" r="4"></circle>
        <path d="M23 21v-2a4 4 0 00-3-3.87m-4-12a4 4 0 010 7.75"></path>
      </svg>
      <p class="text-3xl font-medium text-gray-900 dark:text-gray-300">1M+</p>
      <p class="leading-relaxed dark:text-gray-400">Users</p>
    </div>

<p class="text-3xl font-medium text-gray-900 dark:text-gray-300">
        100k+
      </p>
      <p class="leading-relaxed dark:text-gray-400">Searches per month</p>
    </div>
  </div>
</div>