Beautiful info cards

Responsive and minimal design

This tailwind example is contributed by Amit Pachange, on 21-Jan-2023. 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 Amit Pachange

Tailwind v3.4 11k 22

Fork Fullscreen

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:py-24 lg:px-8">
        <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Our service
            statistics</h2>
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-4 mt-4">
            <div class="bg-white overflow-hidden shadow sm:rounded-lg dark:bg-gray-900">
                <div class="px-4 py-5 sm:p-6">
                    <dl>
                        <dt class="text-sm leading-5 font-medium text-gray-500 truncate dark:text-gray-400">Total free
                            servers</dt>
                        <dd class="mt-1 text-3xl leading-9 font-semibold text-indigo-600 dark:text-indigo-400">1.6M</dd>
                    </dl>
                </div>
            </div>
            <div class="bg-white overflow-hidden shadow sm:rounded-lg dark:bg-gray-900">
                <div class="px-4 py-5 sm:p-6">
                    <dl>
                        <dt class="text-sm leading-5 font-medium text-gray-500 truncate dark:text-gray-400">Servers a
                            month</dt>
                        <dd class="mt-1 text-3xl leading-9 font-semibold text-indigo-600 dark:text-indigo-400">19.2K
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="bg-white overflow-hidden shadow sm:rounded-lg dark:bg-gray-900">
                <div class="px-4 py-5 sm:p-6">
                    <dl>
                        <dt class="text-sm leading-5 font-medium text-gray-500 truncate dark:text-gray-400">Servers a
                            week</dt>
                        <dd class="mt-1 text-3xl leading-9 font-semibold text-indigo-600 dark:text-indigo-400">4.9K</dd>
                    </dl>
                </div>
            </div>
            <div class="bg-white overflow-hidden shadow sm:rounded-lg dark:bg-gray-900">
                <div class="px-4 py-5 sm:p-6">
                    <dl>
                        <dt class="text-sm leading-5 font-medium text-gray-500 truncate dark:text-gray-400">Total users
                        </dt>
                        <dd class="mt-1 text-3xl leading-9 font-semibold text-indigo-600 dark:text-indigo-400">166.7K
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>