Home
Dika Rahman
Stats card with icons

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Info, Show info, Statistics

Card Stats

Author Dika Rahman

1.5k

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>

Related Examples

Info Card

Author:
Prem..

3 years ago

19.5k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

3 years ago

12k
Info card for admin panal
Show stats on your dashboard

Author:
Arya

3 years ago

12.9k
Info cards
Show various statistics on your website

Author:
Arya

3 years ago

11.4k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.7k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

10.4k
Information card

Author:
Samuel Dawson

2 years ago

11.9k
Info card

Author:
Samuel Dawson

2 years ago

10k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.5k
Info cards

Author:
Samuel Dawson

2 years ago

10.6k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11.1k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

171

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components