Studykaise

<div class="blogger-table-container"> <style> @import url('[https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap](https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap)'); .blogger-table-container { margin: 40px auto; font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: auto; padding: 15px; max-width: 900px; } .colorful-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #ffffff; border-radius: 24px; overflow: hidden; border: 4px solid #f1f5f9; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); } /* Animated Header Gradient */ .colorful-table th { background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%); background-size: 200% 200%; animation: gradientBG 5s ease infinite; color: white; padding: 24px; text-align: left; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; border: none; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .colorful-table td { padding: 20px 24px; border-bottom: 1px solid #f1f5f9; color: #1e293b; font-size: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Custom Column Borders & Highlights */ .col-highlight { font-weight: 700; background: linear-gradient(to right, #f8faff, #ffffff); border-left: 5px solid #6366f1; color: #4338ca; } /* Ultra Design Hover State */ .colorful-table tbody tr:hover td { background-color: #fdf2ff; color: #000; transform: translateY(-2px); box-shadow: inset 0 -2px 0 #a855f7; } /* Super Designed Status Badges */ .badge { padding: 8px 16px; border-radius: 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; } .badge-success { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; box-shadow: 0 4px 10px rgba(22, 163, 74, 0.1); } .badge-info { background: #f0f9ff; color: #0284c7; border-color: #bae6fd; box-shadow: 0 4px 10px rgba(2, 132, 199, 0.1); } .badge-warning { background: #fffbeb; color: #d97706; border-color: #fef3c7; box-shadow: 0 4px 10px rgba(217, 119, 6, 0.1); } .badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; box-shadow: 0 0 8px currentColor; } /* Mobile View Fixes */ @media (max-width: 600px) { .colorful-table th, .colorful-table td { padding: 15px; font-size: 13px; } .blogger-table-container { margin: 20px 0; } } </style> <table class="colorful-table"> <thead> <tr> <th>Category</th> <th>Feature Details</th> <th>Current Status</th> </tr> </thead> <tbody> <tr> <td class="col-highlight">User Experience</td> <td>Ultra-Premium Design Interface</td> <td><span class="badge badge-success">Completed</span></td> </tr> <tr> <td class="col-highlight">Performance</td> <td>Core Web Vitals Optimized</td> <td><span class="badge badge-info">Optimized</span></td> </tr> <tr> <td class="col-highlight">Architecture</td> <td>Advanced Cloud Integration</td> <td><span class="badge badge-warning">Testing</span></td> </tr> </tbody> </table> </div>