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 v3.4. It is responsive. similar terms for this example are Info, Show info, Statistics,Graph

Author Samuel Dawson

Tailwind v3.4 12k 23

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

Akshay

4 years ago

14k
Line chart with chart.js and tailwind css

Kairi Greene

3 years ago

12.9k
Pie chart with chart.js and tailwind css

Kairi Greene

3 years ago

13.9k
Bar chart with chart.js and tailwind css

Kairi Greene

3 years ago

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

Santos78

3 years ago

12.9k
Donunt chart with chart.js and tailwind css

Kairi Greene

3 years ago

12.8k
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Ijila Itunu

6 months ago

948
Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Hyun-woo Cho

2 years ago

9k
Information cards for admin panal
Stats cards

Brandon D

3 years ago

11.2k
ExtraLarge stats section

Manon Daniel

3 years ago

14.3k
Best chat prompt

ORGIN_DREAMS

1 year ago

949
machine
A fully interactive, web-based macOS-style desktop environment featuring draggable and resizable windows, a dynamic Dock with magnification, smooth glass UI effects, adaptive colors, a functional photo gallery with hover menus, and integrated mini-apps like Safari, Notes, Weather, and App Store. Built using HTML, CSS, Tailwind, and JavaScript to recreate a modern OS experience directly in the browser.

Gidy Official

10 months ago

569

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.