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

Author:
Kairi Greene

2 years ago

11k
Pie chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

12.4k
Bar chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

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

Author:
Santos78

2 years ago

11.3k
Donunt chart with chart.js and tailwind css

Author:
Kairi Greene

2 years ago

11k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

4.4k
Best chat prompt

Author:
ORGIN_DREAMS

4 weeks ago

24
Simple Kpi
This ui block is meant to be used display Key indicators on an app or website.

Author:
Ranit Saha

5 months ago

717
Information cards for admin panal
Stats cards

Author:
Brandon D

2 years ago

10.2k
Semi transparent Info card

Author:
Prajwal Hallale

2 years ago

11k
Info Card

Author:
Prem..

2 years ago

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