chart

to chart on your family and

This tailwind example is contributed by Nishimwe Jeanine, on 29-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Nishimwe Jeanine

549

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instagram Home Charting</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #fafafa;
            color: #262626;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #dbdbdb;
            margin-bottom: 20px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            font-family: 'Billabong', cursive;
        }
        
        .icons {
            display: flex;
            gap: 20px;
        }
        
        .post {
            background-color: white;
            border: 1px solid #dbdbdb;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        
        .post-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #ccc;
        }
        
        .username {
            font-weight: 600;
        }
        
        .chart-container {
            width: 100%;
            height: 300px;
            padding: 10px;
            position: relative;
        }
        
        .chart {
            width: 100%;
            height: 100%;
            background-color: #f8f9fa;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
        }
        
        .chart-line {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 80%;
            background: linear-gradient(to top, #4bc0c0, #4bc0c080);
            clip-path: polygon(
                0% 100%,
                10% 70%,
                20% 60%,
                30% 50%,
                40% 40%,
                50% 30%,
                60% 40%,
                70% 50%,
                80% 60%,
                90% 70%,
                100% 100%
            );
        }
        
        .chart-grid {
            position: absolute;
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
        }
        
        .grid-line {
            border-right: 1px dashed #ddd;
            border-top: 1px dashed #ddd;
        }
        
        .chart-labels {
            display: flex;
            justify-content: space-between;
            padding: 5px 10px;
            font-size: 12px;
            color: #8e8e8e;
        }
        
        .post-actions {
            display: flex;
            justify-content: space-between;
            padding: 10px 14px;
        }
        
        .action-icons {
            display: flex;
            gap: 16px;
        }
        
        .likes {
            padding: 0 14px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .caption {
            padding: 0 14px;
            margin-bottom: 8px;
        }
        
        .comments {
            padding: 0 14px;
            color: #8e8e8e;
            margin-bottom: 8px;
        }
        
        .timestamp {
            padding: 0 14px 14px;
            font-size: 10px;
            color: #8e8e8e;
            text-transform: uppercase;
        }
        
        .add-comment {
            display: flex;
            justify-content: space-between;
            padding: 14px;
            border-top: 1px solid #efefef;
        }
        
        .comment-input {
            border: none;
            outline: none;
            width: 90%;
        }
        
        .post-button {
            color: #0095f6;
            font-weight: 600;
            background: none;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">Instagram</div>
            <div class="icons">
                <span>❤️</span>
                <span>💬</span>
            </div>
        </div>
        
        <div class="post">
            <div class="post-header">
                <div class="user-info">
                    <div class="avatar"></div>
                    <div class="username">chart_lover</div>
                </div>
                <div>⋮</div>
            </div>
            
            <div class="chart-container">
                <div class="chart">
                    <div class="chart-grid">
                        
                    </div>
                    <div class="chart-line"></div>
                </div>
                <div class="chart-labels">
                    <span>Mon</span>
                    <span>Tue</span>
                    <span>Wed</span>
                    <span>Thu</span>
                    <span>Fri</span>
                </div>
            </div>
            
            <div class="post-actions">
                <div class="action-icons">
                    <span>❤️</span>
                    <span>💬</span>
                    <span>↗️</span>
                </div>
                <div>🔖</div>
            </div>
            
            <div class="likes">1,234 likes</div>
            <div class="caption">
                <span class="username">chart_lover</span> Weekly progress chart! #fitness #progress
            </div>
            <div class="comments">View all 42 comments</div>
            <div class="timestamp">2 hours ago</div>
            
            <div class="add-comment">
                <input type="text" placeholder="Add a comment..." class="comment-input">
                <button class="post-button">Post</button>
            </div>
        </div>
    </div>
</body>
</html>

Related Examples

YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

10 months ago

965
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

7 months ago

703
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.2k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

8 months ago

1.1k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

5 months ago

538
about video
about kelaplus video

Author:
Omer fils ELENGA

7 months ago

780
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.4k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

3 months ago

586
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

9 months ago

1.3k
templete
templete

Author:
Uwera Dorcas

8 months ago

602
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

1 year ago

2.5k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

9 months ago

762

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components