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

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.3k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

10.9k
Pie chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

12.3k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

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

Author:
Santos78

2 years ago

11.2k
Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

10.9k
Info card

Author:
Samuel Dawson

2 years ago

9.6k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11k
Tiles for showing stats

Author:
Task Master

2 years ago

12.1k
How does it work Steps example
Dark themed steps section

Author:
Mereani Waqa

1 year ago

6.8k
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

9k
Best chat prompt

Author:
ORGIN_DREAMS

1 week ago

13

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