Tweet Card

rohitwushu
Jan 27, 2026 2
Live Preview

Live Editor

  <div class="tweet-card">
        <!-- Header -->
        <div class="tweet-header">
            <div class="twitter-logo">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                </svg>
            </div>
        </div>

        <!-- Content -->
        <div class="tweet-content">
            <div class="tweet-title">
                Amazing week for UIBlitz 🚀, Productivity on fire 🔥
            </div>

            <div class="stats-list">
                <div class="stat-item">
                    <span class="stat-icon">🎉</span>
                    <span>+12 New customers</span>
                </div>
                <div class="stat-item">
                    <span class="stat-icon">💰</span>
                    <span>+$2,450 Revenue</span>
                </div>
                <div class="stat-item">
                    <span class="stat-icon">✨</span>
                    <span>+48 New signups</span>
                </div>
            </div>

            <div class="tweet-text">
                New feature: Lightning-fast UI components library. Currently free beta to $99 Pro access
                <br><br>
                Stay tuned 🎯 <span class="hashtag">#uidesign</span>
                <br>
                Special thanks to <span class="mention">@DesignCommunity</span> 🎨
            </div>
        </div>

        <!-- Footer -->
        <div class="tweet-footer">
            <div class="tweet-actions">
                <div class="action-btn retweet">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M4.75 3.79l4.603 4.3-1.706 1.82L6 8.38v7.37c0 .97.784 1.75 1.75 1.75H13V20H7.75c-2.347 0-4.25-1.903-4.25-4.25V8.38L1.853 9.91.147 8.09l4.603-4.3zm11.5 2.71H11V4h5.25c2.347 0 4.25 1.903 4.25 4.25v7.37l1.647-1.53 1.706 1.82-4.603 4.3-4.603-4.3 1.706-1.82L18 15.62V8.25c0-.97-.784-1.75-1.75-1.75z"/>
                    </svg>
                    <span>6.4k</span>
                </div>
                <div class="action-btn like">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"/>
                    </svg>
                    <span>73.9k</span>
                </div>
            </div>

            <div class="tweet-meta">
                3:46 PM · Mar 20, 2025 · 8,520 Views
            </div>
        </div>
    </div>
      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f0f2f5;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* Tweet Card Container */
        .tweet-card {
            width: 100%;
            max-width: 600px;
            height: 300px;
            background: white;
            border-radius: 16px;
            padding: 20px 24px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Twitter Logo */
        .tweet-header {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .twitter-logo {
            color: #1da1f2;
            font-size: 24px;
        }

        /* Tweet Content */
        .tweet-content {
            flex: 1;
            overflow-y: auto;
        }

        .tweet-title {
            font-size: 16px;
            font-weight: 400;
            color: #0f1419;
            margin-bottom: 14px;
            line-height: 1.4;
        }

        /* Stats List */
        .stats-list {
            margin-bottom: 14px;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
            font-size: 15px;
            color: #536471;
        }

        .stat-icon {
            font-size: 16px;
        }

        /* Tweet Text */
        .tweet-text {
            font-size: 15px;
            color: #0f1419;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .hashtag {
            color: #1da1f2;
        }

        .mention {
            color: #1da1f2;
        }

        /* Tweet Footer */
        .tweet-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 12px;
            border-top: 1px solid #eff3f4;
            margin-top: auto;
        }

        .tweet-actions {
            display: flex;
            gap: 20px;
        }

        .action-btn {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #536471;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            color: #1da1f2;
        }

        .action-btn.retweet:hover {
            color: #00ba7c;
        }

        .action-btn.like {
            color: #f91880;
        }

        .tweet-meta {
            font-size: 13px;
            color: #536471;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .tweet-card {
                height: auto;
                min-height: 300px;
            }

            .tweet-title {
                font-size: 15px;
            }

            .stat-item {
                font-size: 14px;
            }

            .tweet-text {
                font-size: 14px;
            }
        }

        /* Custom Scrollbar */
        .tweet-content::-webkit-scrollbar {
            width: 4px;
        }

        .tweet-content::-webkit-scrollbar-track {
            background: transparent;
        }

        .tweet-content::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
        }
Categories

Tweet Card

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
