Onlyciu/resolution-elegance-table-magic
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Modern Resolution Table</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script>12 tailwind.config = {13 darkMode: 'class',14 theme: {15 extend: {16 colors: {17 primary: {18 500: '#6366f1',19 600: '#4f46e5',20 },21 secondary: {22 500: '#10b981',23 600: '#059669',24 }25 }26 }27 }28 }29 </script>30</head>31<body class="bg-gray-50 dark:bg-gray-900">32 <div class="container mx-auto px-4 py-12">33 <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">34 <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">35 <thead class="bg-gray-50 dark:bg-gray-700">36 <tr>37 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ID</th>38 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Title</th>39 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Resolution</th>40 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>41 </tr>42 </thead>43 <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">44 <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">45 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">1</td>46 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Project Update</td>47 <td class="px-6 py-4">48 <div class="resolution-cell">49 Update all project dependencies to their latest versions and ensure compatibility across all environments.50 </div>51 </td>52 <td class="px-6 py-4 whitespace-nowrap">53 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-100">Completed</span>54 </td>55 </tr>56 <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">57 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">2</td>58 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">UI Redesign</td>59 <td class="px-6 py-4">60 <div class="resolution-cell">61 Implement a modern, responsive UI with improved accessibility features and dark mode support while maintaining existing functionality.62 </div>63 </td>64 <td class="px-6 py-4 whitespace-nowrap">65 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100">In Progress</span>66 </td>67 </tr>68 <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">69 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">3</td>70 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Database Migration</td>71 <td class="px-6 py-4">72 <div class="resolution-cell">73 Migrate the existing database schema to support the new requirements including adding audit trails, soft deletes, and performance optimizations for high-traffic scenarios.74 </div>75 </td>76 <td class="px-6 py-4 whitespace-nowrap">77 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-100">Pending</span>78 </td>79 </tr>80 </tbody>81 </table>82 </div>83 </div>84 <script src="script.js"></script>85 <script>86 feather.replace();87 </script>88<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>89</body>90</html>