Medical Services Landing - 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>Meet Our Specialists</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <style> body { font-family: 'Inter', sans-serif; } </style> </head> <body class="bg-gray-100"> <div class="max-w-[736px] mx-auto bg-white shadow-lg"> <!-- Header --> <header class="bg-blue-900 text-white text-sm py-2"> <div class="container mx-auto flex justify-between items-center px-4"> <div class="flex space-x-4"> <span>+123 054 925 23</span> <span>Support@mail.com</span> <span>Uttara, Dhaka, Bangladesh</span> </div> <div class="flex space-x-4 items-center"> <span class="flex items-center"><i class="fas fa-globe mr-1"></i> Eng</span> <button class="bg-green-500 px-4 py-1 rounded text-white">MAKE APPOINTMENT</button> </div> </div> </header> <!-- Navigation --> <nav class="bg-white shadow-md"> <div class="container mx-auto flex justify-between items-center px-4 py-3"> <div class="text-lg font-bold text-green-500">PhysicMed</div> <ul class="flex space-x-6 text-gray-700"> <li>Home</li> <li>About</li> <li>Service</li> <li>Doctor</li> <li>Blog</li> <li>Page</li> </ul> <div class="flex space-x-4"> <i class="fas fa-shopping-cart"></i> <i class="fas fa-search"></i> </div> </div> </nav> <!-- Hero Section --> <section class="bg-blue-100 text-center py-12"> <h1 class="text-2xl font-bold text-gray-900">Meet Our Specialists</h1> <p class="text-gray-600">Home / Doctor</p> </section> <!-- Departments --> <div class="flex justify-center space-x-3 mt-6"> <button class="bg-green-500 text-white px-4 py-1 rounded">All Department</button> <button class="text-gray-600">Cardiology</button> <button class="text-gray-600">Dental</button> <button class="text-gray-600">Neurology</button> <button class="text-gray-600">Pediatric</button> <button class="text-gray-600">Pulmonary</button> </div> <!-- Doctors List --> <section class="grid grid-cols-2 gap-6 px-4 py-8"> <div class="bg-white p-4 shadow-md text-center rounded"> <img src="https://placehold.co/150x150" class="rounded-full mx-auto mb-3"> <h2 class="text-lg font-semibold">Dr. Brain Adam</h2> <p class="text-gray-500">Restorative Dentist</p> <div class="flex justify-center space-x-3 mt-3 text-blue-500"> <i class="fab fa-twitter"></i> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> </div> </div> <div class="bg-white p-4 shadow-md text-center rounded"> <img src="https://placehold.co/150x150" class="rounded-full mx-auto mb-3"> <h2 class="text-lg font-semibold">Dr. Jessica Brown</h2> <p class="text-gray-500">Restorative Dentist</p> <div class="flex justify-center space-x-3 mt-3 text-blue-500"> <i class="fab fa-twitter"></i> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> </div> </div> <div class="bg-white p-4 shadow-md text-center rounded"> <img src="https://placehold.co/150x150" class="rounded-full mx-auto mb-3"> <h2 class="text-lg font-semibold">Dr. Labrien Brown</h2> <p class="text-gray-500">Restorative Dentist</p> <div class="flex justify-center space-x-3 mt-3 text-blue-500"> <i class="fab fa-twitter"></i> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> </div> </div> <div class="bg-white p-4 shadow-md text-center rounded"> <img src="https://placehold.co/150x150" class="rounded-full mx-auto mb-3"> <h2 class="text-lg font-semibold">Dr. Noreain Waltar</h2> <p class="text-gray-500">Restorative Dentist</p> <div class="flex justify-center space-x-3 mt-3 text-blue-500"> <i class="fab fa-twitter"></i> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> </div> </div> </section> <!-- Newsletter --> <section class="bg-blue-900 text-white py-8 px-4 text-center"> <h2 class="text-xl font-bold">Subscribe To Our Newsletter</h2> <div class="flex justify-center mt-4"> <input type="text" class="p-2 w-64 rounded-l text-gray-700" placeholder="Enter your email address"> <button class="bg-green-500 px-4 py-2 rounded-r text-white">Subscribe</button> </div> </section> <!-- Footer --> <footer class="bg-gray-100 text-gray-700 py-8 px-4"> <div class="grid grid-cols-2 gap-6"> <div> <h2 class="font-bold text-green-500">PhysicMed</h2> <p class="text-sm">Outsource your HR functions to industry-specialized experts.</p> <div class="flex space-x-3 mt-3 text-blue-500"> <i class="fab fa-facebook"></i> <i class="fab fa-twitter"></i> <i class="fab fa-instagram"></i> </div> </div> <div> <h2 class="font-bold">Useful Links</h2> <ul class="text-sm space-y-2"> <li>Home</li> <li>About Us</li> <li>Service</li> <li>FAQs</li> <li>Contact</li> </ul> </div> </div> </footer> <div class="text-center text-sm text-gray-500 py-4"> © Copyright By SoftTech-IT 2021 </div> </div> </body> </html>
