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

10k

13

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

11.3k
Line chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

9.9k
Pie chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

11.1k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

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

Author:
Santos78

1 year ago

10.1k
Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

1 year ago

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

Author:
Mereani Waqa

1 year ago

5.5k
Service Metrics cards

Author:
Paul Intay

9 months ago

1.6k
Information cards for admin panal
Stats cards

Author:
Brandon D

1 year ago

9.1k
Info cards
Show various statistics on your website

Author:
Arya

2 years ago

10.1k
Statistics card section

Author:
Laurits

2 years ago

14.5k
Tailwind stat cards
Highlight key statistics

Author:
Anonymous

1 year ago

8.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ 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

© 2024 TailwindFlex. All Rights Reserved.

v1.9