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

407

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

5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

2 months ago

63
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.3k
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

3 months ago

651
Invoice
simpel invoice digital

Author:
Rushikesh Latpate

2 months ago

418
profile
user profile

Author:
gidy

3 months ago

416
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

7 months ago

1.3k
Giftcard grid

Author:
ariaw

1 week ago

60
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

5 months ago

496
Verify OTP
verification code

Author:
gidy

3 months ago

171
Recipe Card
beautiful recipe component with image and step-by-step instructions

Author:
Anonymous

2 years ago

7k
Snake Game tailwind
snake game

Author:
QQ-VVN

4 months ago

349
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

3 months ago

164

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components