Home
Samuel Dawson
Daily growth chart

Daily growth chart

chart for showing data each day of the week

This tailwind example is contributed by Samuel Dawson, on 05-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Info, Show info, Statistics,Graph

Stats Chart

Author Samuel Dawson

10.9k

16

Fork Fullscreen

<div class="flex-grow bg-white rounded-xl shadow-md px-6 py-4 flex flex-col items-end">
    <div class="text-xs font-semibold tracking-wide uppercase py-1 px-3 rounded-full"
        style="background-color: rgb(123, 255, 253); color: rgb(0, 119, 117);">New</div>
    <div class="grid grid-cols-7 gap-1 flex-grow self-stretch">
        <div class="flex flex-col justify-end items-center">
            <div class="w-4 h-4 mx-auto rounded-full" style="background-color: rgb(123, 255, 253);"></div>
            <div class="text-center text-xs text-gray-400 font-semibold mt-2">M</div>
        </div>
        <div class="flex flex-col justify-end items-center">
            <div class="w-4 h-16 mx-auto rounded-full" style="background-color: rgb(0, 255, 244);"></div>
            <div class="text-center text-xs text-gray-400 font-semibold mt-2">T</div>
        </div>
        <div class="flex flex-col justify-end items-center">
            <div class="w-4 h-24 mx-auto rounded-full" style="background-color: rgb(0, 255, 244);"></div>
            <div class="text-center text-xs text-gray-400 font-semibold mt-2">W</div>
        </div>
        <div class="flex flex-col justify-end items-center">
            <div class="w-4 h-32 mx-auto rounded-full" style="background-color: rgb(0, 237, 219);"></div>
            <div class="text-center text-xs text-gray-400 font-semibold mt-2">T</div>
        </div>
        <div class="flex flex-col justify-end items-center">
            <div class="w-4 h-20 mx-auto rounded-full" style="background-color: rgb(0, 255, 244);"></div>
            <div class="text-center text-xs text-gray-400 font-semibold mt-2">F</div>
        </div>
        <div class="flex flex-col justify-end items-center">
            <div class="w-4 h-10 mx-auto rounded-full" style="background-color: rgb(123, 255, 253);"></div>
            <div class="text-center text-xs text-gray-400 font-semibold mt-2">S</div>
        </div>
        <div class="flex flex-col justify-end items-center">
            <div class="w-4 h-10 mx-auto rounded-full" style="background-color: rgb(123, 255, 253);"></div>
            <div class="text-center text-xs text-gray-400 font-semibold mt-2">S</div>
        </div>
    </div>
</div>

Related Examples

Bar Chart with TailwindCSS and AlpineJS

Author:
Akshay

2 years ago

12.6k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

11.3k
Pie chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

12.7k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

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

Author:
Santos78

2 years ago

11.6k
Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

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

Author:
Arya

3 years ago

12.6k
Service Metrics cards

Author:
Paul Intay

1 year ago

2.7k
Info cards for admin panal

Author:
Sophia Baker

2 years ago

9.3k
Stats Banner Example
Show your stats proudly

Author:
Nomusa Botha

1 year ago

1.6k
Info card

Author:
Samuel Dawson

2 years ago

9.8k
Stats Section
The gradient background stats section uses dark shades of gradient change colors according to your website theme

Author:
Santiago Hernandez

1 year ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1