chart

to chart on your family and

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

Other

Author Nishimwe Jeanine

Tailwind v3.4 1.1k 3

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

Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Muhammad Umair Arshad

1 year ago

1.4k
register
this is register form

aditya_sharma

1 month ago

421
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

3 months ago

227
Forgot password?
you can change password an time

gidy

1 year ago

1k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

ORGIN_DREAMS

1 year ago

1.6k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
3d element

Omer fils ELENGA

9 months ago

820
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Muhammad Umair Arshad

1 year ago

1.3k
hover grid card
hover over card to change images and contents.

Olajide Olamide (Laemmy)

4 months ago

490
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

nejaa badr

1 year ago

2.9k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Ranit Saha

1 year ago

2.7k
ztailwindsnippet01

Anonymous

2 months ago

196