Advanced Table Filter - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SEO Keyword Analysis Tool</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-50"> <div class="container mx-auto px-4 py-8"> <h1 class="text-3xl font-bold text-gray-800 mb-8">SEO Keyword Analysis Tool</h1> <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> <form class="space-y-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label for="keyword" class="block text-sm font-medium text-gray-700">Keywords</label> <input type="text" id="keyword" name="keyword" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500" placeholder="Enter keywords or phrases" aria-label="Enter keywords"> </div> <div> <label for="location" class="block text-sm font-medium text-gray-700">Location</label> <select id="location" name="location" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"> <option value="global">Global</option> <option value="us">United States</option> <option value="uk">United Kingdom</option> </select> </div> </div> <button type="submit" class="w-full md:w-auto px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">Analyze Keywords</button> </form> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> <div class="bg-white rounded-lg shadow-lg p-6" role="region" aria-label="Search Volume Metrics"> <h3 class="text-lg font-semibold text-gray-800 mb-4">Search Volume</h3> <div class="text-3xl font-bold text-blue-600">45,000</div> <div class="text-sm text-gray-600 mt-2">Monthly Searches</div> <div class="mt-4 h-2 bg-gray-200 rounded-full"> <div class="h-2 bg-blue-600 rounded-full" style="width: 75%"></div> </div> </div> <div class="bg-white rounded-lg shadow-lg p-6" role="region" aria-label="Keyword Difficulty"> <h3 class="text-lg font-semibold text-gray-800 mb-4">Keyword Difficulty</h3> <div class="text-3xl font-bold text-green-600">65%</div> <div class="text-sm text-gray-600 mt-2">Moderate Competition</div> <div class="mt-4 h-2 bg-gray-200 rounded-full"> <div class="h-2 bg-green-600 rounded-full" style="width: 65%"></div> </div> </div> <div class="bg-white rounded-lg shadow-lg p-6" role="region" aria-label="Cost Per Click"> <h3 class="text-lg font-semibold text-gray-800 mb-4">CPC</h3> <div class="text-3xl font-bold text-purple-600">$2.45</div> <div class="text-sm text-gray-600 mt-2">Average Cost per Click</div> <div class="mt-4 h-2 bg-gray-200 rounded-full"> <div class="h-2 bg-purple-600 rounded-full" style="width: 45%"></div> </div> </div> </div> <div class="bg-white rounded-lg shadow-lg p-6"> <h2 class="text-xl font-semibold text-gray-800 mb-6">Related Keywords</h2> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Keyword</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Volume</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Difficulty</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPC</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200"> <tr class="hover:bg-gray-50 transition-colors"> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">digital marketing</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">35,000</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78%</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$3.20</td> </tr> <tr class="hover:bg-gray-50 transition-colors"> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">seo tools</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">28,000</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">62%</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2.80</td> </tr> <tr class="hover:bg-gray-50 transition-colors"> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">keyword research</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42,000</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">71%</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2.95</td> </tr> </tbody> </table> </div> </div> </div> </body> </html> thêm phần filter vào bảng
