Anonymous

F a Q Section Component - Copy this Html, Tailwind Component to your project

Create a subpage named popular questions for oral hygiene website similar to this landing page <!DOCTYPE html> <html lang="sl" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DentalCare Plus</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> </head> <body class="font-sans">  <nav class="bg-white fixed w-full z-50 shadow-md"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-16"> <div class="flex items-center"> <span class="text-2xl font-bold text-blue-600">DentalCare+</span> </div> <div class="hidden md:flex items-center space-x-8"> <a href="#home" class="text-gray-700 hover:text-blue-600 transition">Domov</a> <a href="#services" class="text-gray-700 hover:text-blue-600 transition">Storitve</a> <a href="#about" class="text-gray-700 hover:text-blue-600 transition">Pogosta vprašanja</a> <a href="#services" class="text-gray-700 hover:text-blue-600 transition">Cenik</a> <a href="#about" class="text-gray-700 hover:text-blue-600 transition">O nas</a> </div> <div class="md:hidden flex items-center"> <button class="mobile-menu-button"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </div> </div> </nav>  <section id="home" class="relative h-screen flex items-center justify-center bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1606811841689-23dfddce3e95?auto=format&fit=crop&q=80');"> <div class="absolute inset-0 bg-black opacity-50"></div> <div class="relative text-center text-white px-4"> <h1 class="text-5xl font-bold mb-6">Vaš nasmeh je naša prioriteta</h1> <p class="text-xl mb-8">Experience world-class dental care with our expert team</p> <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">Kontaktirajte nas</a> </div> </section>  <section id="services" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <h2 class="text-4xl font-bold text-center mb-16">Priljubljene Storitve</h2> <div class="grid md:grid-cols-3 gap-8"> <a href="#contact" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition"> <i class="fas fa-tooth text-4xl text-blue-600 mb-4"></i> <h3 class="text-xl font-bold mb-4">General Dentistry</h3> <p class="text-gray-600">Comprehensive dental care for your entire family</p> </a> <a href="#contact" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition"> <i class="fas fa-teeth text-4xl text-blue-600 mb-4"></i> <h3 class="text-xl font-bold mb-4">Cosmetic Dentistry</h3> <p class="text-gray-600">Transform your smile with our cosmetic treatments</p> </a> <a href="#contact" class="bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition"> <i class="fas fa-teeth-open text-4xl text-blue-600 mb-4"></i> <h3 class="text-xl font-bold mb-4">Orthodontics</h3> <p class="text-gray-600">Achieve the perfect smile with our orthodontic solutions</p> </a> </div> </div> </section>  <section id="about" class="py-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid md:grid-cols-2 gap-12 items-center"> <div> <h2 class="text-4xl font-bold mb-6">About Us</h2> <p class="text-gray-600 mb-6">With over 20 years of experience, we provide comprehensive dental care using the latest technology and techniques. Our team of experienced professionals is dedicated to ensuring your comfort and satisfaction.</p> <ul class="space-y-4"> <li class="flex items-center"><i class="fas fa-check text-blue-600 mr-2"></i> Expert Team of Specialists</li> <li class="flex items-center"><i class="fas fa-check text-blue-600 mr-2"></i> State-of-the-art Facilities</li> <li class="flex items-center"><i class="fas fa-check text-blue-600 mr-2"></i> Patient-Centered Care</li> </ul> </div> <div> <img src="https://images.unsplash.com/photo-1629909613654-28e377c37b09?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZGVudGFsLWNsaW5pY3x8fHx8fDE2ODU1NzY0OTY&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080" alt="Dental clinic" class="rounded-lg shadow-lg"> </div> </div> </div> </section>  <section id="blog" class="py-20 bg-gray-50"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <h2 class="text-4xl font-bold text-center mb-16">Pogosta vprašanja</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1606811841689-23dfddce3e95?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZGVudGFsLWNhcmV8fHx8fHwxNjg1NTc2NDk2&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080" alt="Dental care tips" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Tips for Better Oral Hygiene</h3> <p class="text-gray-600 mb-4">Learn the best practices for maintaining excellent oral health...</p> <a href="#" class="text-blue-600 hover:text-blue-700 font-semibold">Read More →</a> </div> </div> <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1606811841649-7be8b7a43dd9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZGVudGFsLWNsZWFuaW5nfHx8fHx8MTY4NTU3NjQ5Ng&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080" alt="Dental procedures" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Modern Dental Procedures</h3> <p class="text-gray-600 mb-4">Discover the latest advancements in dental procedures...</p> <a href="#" class="text-blue-600 hover:text-blue-700 font-semibold">Read More →</a> </div> </div> <div class="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition"> <img src="https://images.unsplash.com/photo-1606811842242-c9385ca7f9da?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZGVudGFsLWhlYWx0aHx8fHx8fDE2ODU1NzY0OTY&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080" alt="Dental health" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Children's Dental Health</h3> <p class="text-gray-600 mb-4">Essential tips for maintaining your child's oral health...</p> <a href="#" class="text-blue-600 hover:text-blue-700 font-semibold">Read More →</a> </div> </div> </div> </div> </section> <section class="py-20 bg-gray-50"> <div class="container mx-auto px-6"> <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white p-6 rounded-lg shadow-md"> <div class="text-yellow-400 mb-4">⭐️⭐️⭐️⭐️⭐️</div> <p class="text-gray-600 mb-4">"Amazing products and service! My teeth have never felt better."</p> <p class="font-semibold">- Sarah Johnson</p> </div>  </div> </div> </section>  <section id="contact" class="py-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <h2 class="text-4xl font-bold text-center mb-16">Contact Us</h2> <div class="max-w-3xl mx-auto"> <form class="space-y-6"> <div class="grid md:grid-cols-2 gap-6"> <div> <label class="block text-gray-700 mb-2">Name</label> <input type="text" class="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-600" required> </div> <div> <label class="block text-gray-700 mb-2">Email</label> <input type="email" class="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-600" required> </div> </div> <div> <label class="block text-gray-700 mb-2">Subject</label> <input type="text" class="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-600" required> </div> <div> <label class="block text-gray-700 mb-2">Message</label> <textarea rows="4" class="w-full px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 focus:ring-blue-600" required></textarea> </div> <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Send Message</button> </form> </div> </div> </section>  <footer class="bg-gray-800 text-white py-12"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid md:grid-cols-4 gap-8"> <div> <h3 class="text-xl font-bold mb-4">DentalCare+</h3> <p class="text-gray-400">Providing quality dental care for your entire family</p> </div> <div> <h3 class="text-xl font-bold mb-4">Quick Links</h3> <ul class="space-y-2"> <li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li> <li><a href="#about" class="text-gray-400 hover:text-white">About Us</a></li> <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li> <li><a href="#blog" class="text-gray-400 hover:text-white">Blog</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Services</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white">General Dentistry</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Cosmetic Dentistry</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Orthodontics</a></li> <li><a href="#" class="text-gray-400 hover:text-white">Pediatric Dentistry</a></li> </ul> </div> <div> <h3 class="text-xl font-bold mb-4">Contact Info</h3> <ul class="space-y-2 text-gray-400"> <li>123 Dental Street</li> <li>New York, NY 10001</li> <li>Phone: (555) 123-4567</li> <li>Email: info@dentalcare.com</li> </ul> </div> </div> <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> <p>© 2024 DentalCare+. All rights reserved.</p> </div> </div> </footer> </body> </html>

Prompt

About

FAQ Section Component - Easily create a subpage for popular oral hygiene questions with collapsible answers, search functionality, and. Get component free!

F a Q Section Component - Copy this Html, Tailwind Component to your project

About

Tags

Share