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

945

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

2 years ago

17.8k
Weather info Card
Inspired from Mamba UI

Author:
Ron Hicks

2 years ago

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

Author:
Arya

2 years ago

12.2k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.7k
Info cards for admin panel

Author:
Sophia Baker

2 years ago

10.6k
Beautiful info cards
Responsive and minimal design

Author:
Amit Pachange

2 years ago

9.7k
Information card

Author:
Samuel Dawson

2 years ago

11k
Info card

Author:
Samuel Dawson

2 years ago

9.5k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

8.8k
Info cards

Author:
Samuel Dawson

2 years ago

9.8k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

10.9k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

4 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components