Code Marketplace Homepage - Copy this Html, Tailwind Component to your project
cái này <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Code Marketplace</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-50"> <header class="bg-white shadow-sm"> <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-16"> <div class="flex"> <div class="flex-shrink-0 flex items-center"> <img class="h-8 w-auto" src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97" alt="Logo"> </div> </div> <div class="flex items-center space-x-4"> <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Login</button> <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200">Sign Up</button> </div> </div> </nav> </header> <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div class="flex justify-between items-center mb-8"> <h1 class="text-3xl font-bold text-gray-900">Featured Code Templates</h1> <div class="flex space-x-4"> <select class="border rounded-md px-3 py-2"> <option>Sort by: Latest</option> <option>Price: Low to High</option> <option>Price: High to Low</option> </select> <select class="border rounded-md px-3 py-2"> <option>All Categories</option> <option>Frontend</option> <option>Backend</option> <option>Full Stack</option> </select> </div> </div> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"> <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c" alt="Code preview" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-semibold text-gray-900">Modern Dashboard Template</h3> <p class="mt-2 text-gray-600">A responsive dashboard template built with React and Tailwind CSS.</p> <div class="mt-4 flex justify-between items-center"> <span class="text-blue-600 font-semibold">$49.99</span> <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Preview</button> </div> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085" alt="Code preview" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-semibold text-gray-900">E-commerce API Solution</h3> <p class="mt-2 text-gray-600">Complete backend API for e-commerce platforms using Node.js.</p> <div class="mt-4 flex justify-between items-center"> <span class="text-blue-600 font-semibold">$79.99</span> <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Preview</button> </div> </div> </div> <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300"> <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6" alt="Code preview" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-lg font-semibold text-gray-900">Authentication System</h3> <p class="mt-2 text-gray-600">Secure authentication system with OAuth integration.</p> <div class="mt-4 flex justify-between items-center"> <span class="text-blue-600 font-semibold">$39.99</span> <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">Preview</button> </div> </div> </div> </div> </main> </body> </html> tôi cần nó có respnsive và có giao diện và menu mobile nữa, có modal login, register và có footer công ty nify.vn