Tiles for showing stats

This tailwind example is contributed by Task Master, on 01-Feb-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Info, Show info, Statistics

Stats eCommerce

Author Task Master

Tailwind v3.4 13.8k 21

Fork Fullscreen

<div class="flex items-center justify-center w-screen h-screen text-gray-800 p-10 bg-gray-200">
    
    <div class="grid lg:grid-cols-3 md:grid-cols-2 gap-6 w-full max-w-6xl">

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-green-200 h-16 w-16 rounded">
                <svg class="w-6 h-6 fill-current text-green-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <span class="text-xl font-bold">$8,430</span>
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">Revenue last 30 days</span>
                    <span class="text-green-500 text-sm font-semibold ml-2">+12.6%</span>
                </div>
            </div>
        </div>

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-red-200 h-16 w-16 rounded">
                <svg class="w-6 h-6 fill-current text-red-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <span class="text-xl font-bold">211</span>
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">Sales last 30 days</span>
                    <span class="text-red-500 text-sm font-semibold ml-2">-8.1%</span>
                </div>
            </div>
        </div>

<div class="flex items-center p-4 bg-white rounded">
            <div class="flex flex-shrink-0 items-center justify-center bg-green-200 h-16 w-16 rounded">
                <svg class="w-6 h-6 fill-current text-green-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                    fill="currentColor">
                    <path fill-rule="evenodd"
                        d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="flex-grow flex flex-col ml-4">
                <span class="text-xl font-bold">140</span>
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">Customers last 30 days</span>
                    <span class="text-green-500 text-sm font-semibold ml-2">+28.4%</span>
                </div>
            </div>
        </div>

</div>

</div>

Related Examples

Statistics card section

Laurits

3 years ago

18.7k
Responsive Info cards for admin panel
Show stats to the admin dashboard

Santos78

3 years ago

12.8k
Info cards for admin panel
Display various Infos and statatics in admin panel with these cards

Arya

3 years ago

12.6k
Info Card

Prem..

3 years ago

20.7k
Information cards for admin panal
Stats cards

Brandon D

3 years ago

11.2k
Info cards

Samuel Dawson

3 years ago

11.4k
Info cards

Lukas Müller

3 years ago

12.1k
Basic stat cards

Santos78

3 years ago

12.3k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Code huit

3 years ago

14.7k
Semi transparent Info card

Prajwal Hallale

3 years ago

11.2k
Feature cards
Feature showcase

Steven Kuhn

4 years ago

10.7k
Product Page
Showcase for the product.

Prem..

4 years ago

34.7k