Car Insurance Plans - Copy this React, 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>Car Insurance Plans</title> <style> /* General Styles */ body { font family: 'Segoe UI', Tahoma, Geneva, Verdana, sans serif; margin: 0; padding: 0; background color: #f7f9fc; color: #333; } h1, h2 { color: #333; text align: center; font weight: 600; } /* Navbar */ nav { background color: #004d99; color: white; padding: 1rem; box shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z index: 1000; } nav ul { display: flex; justify content: center; list style: none; padding: 0; margin: 0; } nav ul li { margin: 0 1.5rem; } nav ul li a { color: white; text decoration: none; font weight: bold; font size: 1.1em; transition: color 0.3s ease; } nav ul li a:hover { color: #ffcc00; } .container { width: 85%; margin: 20px auto; padding: 20px; } /* Section Titles */ section h2 { color: #004d99; border bottom: 3px solid #004d99; padding bottom: 8px; margin bottom: 25px; font size: 1.6em; } /* Card Layout */ .card container { display: flex; flex wrap: wrap; gap: 25px; justify content: center; } .card { background color: #fff; border: 1px solid #e0e0e0; border radius: 10px; box shadow: 0px 6px 12px rgba(0, 0, 0, 0.1); overflow: hidden; width: 240px; text align: center; padding: 20px; transition: transform 0.3s ease, box shadow 0.3s ease; cursor: pointer; } .card:hover { transform: translateY( 8px); box shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); } .card img { max width: 100%; height: auto; border radius: 8px; margin bottom: 15px; } .card h3 { color: #333; font size: 1.3em; margin: 0 0 10px; } .card .price { color: #e14e4e; font weight: bold; font size: 1.2em; } .card p { font size: 0.9em; color: #666; margin: 5px 0; } .card button { background color: #004d99; color: white; border: none; padding: 10px 15px; margin top: 15px; font size: 0.9em; cursor: pointer; border radius: 5px; transition: background color 0.3s ease; box shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } .card button:hover { background color: #003366; } /* Footer */ footer { background color: #004d99; color: white; text align: center; padding: 1.5rem 0; font size: 0.9em; } footer a { color: #ffcc00; text decoration: none; font weight: bold; } footer a:hover { text decoration: underline; } /* Modal Background */ .modal { display: none; position: fixed; z index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background color: rgba(0, 0, 0, 0.5); padding top: 50px; box sizing: border box; } /* Modal Content */ .modal content { background color: #fff; margin: auto; padding: 20px; border: 1px solid #888; width: 90%; max width: 500px; border radius: 8px; box shadow: 0 4px 10px rgba(0, 0, 0, 0.3); position: relative; top: 50%; transform: translateY( 50%); } /* Close Button */ .close btn { color: #aaa; float: right; font size: 28px; font weight: bold; cursor: pointer; } .close btn:hover, .close btn:focus { color: black; } /* Button Styling for Modal */ button { padding: 10px 20px; font size: 16px; border radius: 8px; border: none; cursor: pointer; transition: 0.3s ease; } /* Close Button Specific Style */ button[onclick="closeModal()"] { background color: #e0e0e0; color: #333; margin right: 10px; } button[onclick="closeModal()"]:hover { background color: #ccc; } /* Buy Now Button Specific Style */ button[onclick^="buyNow"] { background color: #4CAF50; color: white; box shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } button[onclick^="buyNow"]:hover { background color: #45a049; box shadow: 0px 5px 7px rgba(0, 0, 0, 0.15); } /* Right align button in Navbar */ #contact button { background color: #ffcc00; color: #004d99; border: none; padding: 10px 15px; font size: 1em; font weight: bold; cursor: pointer; border radius: 5px; transition: background color 0.3s ease; box shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); margin left: auto; } #contact button:hover { background color: #ffd633; } /* Navbar Button */ #contact button { background color: #ffcc00; color: #004d99; font weight: bold; padding: 8px 16px; border: none; border radius: 5px; cursor: pointer; font size: 1em; transition: background color 0.3s ease; margin left: auto; } #contact button:hover { background color: #e6b800; } /* Flex alignment to move the button to the right side */ nav { display: flex; align items: center; } nav ul { flex grow: 1; display: flex; justify content: center; } .contact info box { display: none; position: fixed; top: 50%; left: 50%; transform: translate( 50%, 50%); padding: 20px; background color: #f1f1f1; border: 1px solid #ddd; box shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); border radius: 8px; width: 300px; z index: 1000; text align: center; } /* Style for the close button */ .close btn { cursor: pointer; font size: 20px; margin left: 10px; } </style> </head> <body> <nav> <h1>Car Insurance Plans</h1> <ul> <li><a href="#third party">Third Party Insurance</a></li> <li><a href="#comprehensive">Comprehensive Plans</a></li> <li><a href="#own damage">Own Damage Plans</a></li> <li><a href="#trending">Trending Plans</a></li> <li><a href="#" id="contact link">Contact Us</a></li> </ul> </nav> <div class="container"> <section id="third party"> <h2>Third Party Insurance</h2> <div class="card container" id="third party cards"></div> </section> <section id="comprehensive"> <h2>Comprehensive Plans</h2> <div class="card container" id="comprehensive cards"></div> </section> <section id="own damage"> <h2>Own Damage Plans</h2> <div class="card container" id="own damage cards"></div> </section> <section id="trending"> <h2>Trending Plans</h2> <div class="card container" id="trending cards"></div> </section> </div> <! Modal for displaying company details > <div id="modal" class="modal"> <div class="modal content"> <span class="close btn" onclick="closeModal()">×</span> <div id="modal body"></div> </div> </div> <! Contact info box > <div id="contact info box" class="contact info box"> <p>Contact us for On Call Vehicle Health Check Up at: <strong>+916836757232</strong></p> </div> <script> const insurancePlans = { "third party": [ { name: "Bajaj", logo: "https://mechomotive.com/wp content/uploads/2021/07/Bajaj.png", price: "$200", insuranceTypes: "Third Party", about: "Bajaj Allianz is a renowned provider of third party car insurance with extensive coverage and affordable pricing." }, { name: "Chola MS", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcSs5n1E_sB9jSK3GDbIvbmxbwKS2MvK96Shag&s", price: "$220", insuranceTypes: "Third Party", about: "Chola MS offers reliable third party car insurance, ensuring hassle free claims." }, { name: "Digit", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcS2jgmdqi67JzlI5IbAXrkist3R2Z3TLcleSQ&s", price: "$250", insuranceTypes: "Third Party", about: "Digit provides comprehensive third party insurance with a customer friendly experience." }, { name: "Future Generali", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcRLa2clWCdBijkNys3BT1W95pSYJzOPGtpUlQ&s", price: "$210", insuranceTypes: "Third Party", about: "Future Generali's third party insurance offers quality coverage and fast claims." }, { name: "ICICI Lombard", logo: "https://www.bizzbuzz.news/h upload/2022/08/26/1582647 icicic lomlourd.jpg", price: "$230", insuranceTypes: "Third Party", about: "ICICI Lombard is a leading insurer known for robust third party coverage." }, { name: "HDFC ERGO", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcQjqcIGQy D0KHWjG4lGfxqwADdDuRc2SYr2w&s", price: "$240", insuranceTypes: "Third Party", about: "HDFC ERGO provides secure third party insurance with nationwide coverage." }, { name: "SBI General", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcR7z5gHwm9zeCoYxpe8qvLq3ijh0DS0wQshKQ&s", price: "$200", insuranceTypes: "Third Party", about: "SBI General's third party insurance is affordable with a smooth claims process." }, { name: "ZUNO", logo: "https://indianpsu.com/wp content/uploads/2023/11/IMG 20231122 WA0033 780x439.jpg", price: "$220", insuranceTypes: "Third Party", about: "ZUNO offers reliable third party insurance with excellent customer service." }, { name: "Sriram General Insurance", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcR96sKf2DlGD82DpQbLbi5vAc8Pe5e1fht9iQ&s", price: "$250", insuranceTypes: "Third Party", about: "Sriram General Insurance provides effective third party coverage with easy claims." }, { name: "United India Insurance", logo: "https://bimabazaar.com/wp content/uploads/2017/08/united 1.jpg", price: "$210", insuranceTypes: "Third Party", about: "United India Insurance is a trusted provider of third party car insurance." } ], "comprehensive": [ { name: "Bajaj", logo: "https://mechomotive.com/wp content/uploads/2021/07/Bajaj.png", price: "$300", planType: "Comprehensive", about: "Bajaj Allianz provides full coverage with a focus on customer satisfaction." }, { name: "Chola MS", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcSs5n1E_sB9jSK3GDbIvbmxbwKS2MvK96Shag&s", price: "$320", planType: "Comprehensive", about: "Chola MS offers strong comprehensive car insurance with wide coverage." }, { name: "Digit", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcS2jgmdqi67JzlI5IbAXrkist3R2Z3TLcleSQ&s", price: "$350", planType: "Comprehensive", about: "Digit's comprehensive insurance ensures peace of mind with extensive coverage." }, { name: "Future Generali", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcRLa2clWCdBijkNys3BT1W95pSYJzOPGtpUlQ&s", price: "$310", planType: "Comprehensive", about: "Future Generali provides complete protection with flexible options." }, { name: "HDFC ERGO", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcQjqcIGQy D0KHWjG4lGfxqwADdDuRc2SYr2w&s", price: "$330", planType: "Comprehensive", about: "HDFC ERGO comprehensive insurance combines affordability and coverage." }, { name: "ICICI Lombard", logo: "https://www.bizzbuzz.news/h upload/2022/08/26/1582647 icicic lomlourd.jpg", price: "$340", planType: "Comprehensive", about: "ICICI Lombard offers top notch comprehensive insurance with extensive benefits." }, { name: "SBI General", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcR7z5gHwm9zeCoYxpe8qvLq3ijh0DS0wQshKQ&s", price: "$300", planType: "Comprehensive", about: "SBI General's comprehensive insurance is affordable and reliable." }, { name: "TATA", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcTsZrlriXOW2OxzNHEFXzEycFrXd3h4e58jcA&s", price: "$320", planType: "Comprehensive", about: "TATA offers premium comprehensive insurance with great coverage." }, { name: "Zurich Kotak", logo: "https://img cdn.thepublive.com/fit in/1200x675/newsdrum in/media/media_files/9XMpJBWIhfwNS9lagvB7.jpg", price: "$350", planType: "Comprehensive", about: "Zurich Kotak provides superior comprehensive coverage with ease of claim." }, { name: "Reliance General Insurance", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcTvD9csUNSHTlYPlS1tH6JG3edrfCU_HhQhHQ&s", price: "$310", planType: "Comprehensive", about: "Reliance General Insurance offers reliable comprehensive coverage." } ], "own damage": [ { name: "Bajaj", logo: "https://mechomotive.com/wp content/uploads/2021/07/Bajaj.png", price: "$400", planType: "Own Damage", about: "Bajaj Allianz covers own damage with fast claim processing." }, { name: "Digit", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcS2jgmdqi67JzlI5IbAXrkist3R2Z3TLcleSQ&s", price: "$420", planType: "Own Damage", about: "Digit offers wide own damage coverage with reliable service." }, { name: "Liberty General Insurance", logo: "https://www.livelaw.in/h upload/2024/06/26/1600x960_546338 liberty videocon general insurance.webp", price: "$450", planType: "Own Damage", about: "Liberty General Insurance focuses on effective own damage protection." }, { name: "Oriental Insurance", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcQGpzrtbcPrCjmKkm72uN5FIPw5KI8bQ5H2Wg&s", price: "$410", planType: "Own Damage", about: "Oriental Insurance provides strong coverage for own damage cases." }, { name: "SBI General", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcR7z5gHwm9zeCoYxpe8qvLq3ijh0DS0wQshKQ&s", price: "$430", planType: "Own Damage", about: "SBI General is a dependable option for own damage insurance." }, { name: "Sriram General Insurance", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcR96sKf2DlGD82DpQbLbi5vAc8Pe5e1fht9iQ&s", price: "$440", planType: "Own Damage", about: "Sriram General Insurance offers effective own damage policies." }, { name: "TATA", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcTsZrlriXOW2OxzNHEFXzEycFrXd3h4e58jcA&s", price: "$400", planType: "Own Damage", about: "TATA provides own damage insurance with extensive options." }, { name: "ZUNO", logo: "https://indianpsu.com/wp content/uploads/2023/11/IMG 20231122 WA0033 780x439.jpg", price: "$420", planType: "Own Damage", about: "ZUNO offers comprehensive own damage protection." }, { name: "Zurich Kotak", logo: "https://img cdn.thepublive.com/fit in/1200x675/newsdrum in/media/media_files/9XMpJBWIhfwNS9lagvB7.jpg", price: "$450", planType: "Own Damage", about: "Zurich Kotak covers own damage with ease of claims." }, { name: "ICICI Lombard", logo: "https://www.bizzbuzz.news/h upload/2022/08/26/1582647 icicic lomlourd.jpg", price: "$410", planType: "Own Damage", about: "ICICI Lombard provides robust own damage coverage." } ], "trending": [ { name: "Bajaj", logo: "https://mechomotive.com/wp content/uploads/2021/07/Bajaj.png", price: "$500", planType: "Pay As You Drive", ClaimsSettled: "98%", ClaimBenefits: "Repair Anywhere, 50% Advance Payment", about: "Bajaj's pay as you drive option combines flexibility and affordability." }, { name: "Digit", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcS2jgmdqi67JzlI5IbAXrkist3R2Z3TLcleSQ&s", price: "$520", planType: "Pay As You Drive", ClaimsSettled: "96%", ClaimBenefits: "6 Month Repair Warranty, 50% Advance Payment, Free Pick up & Drop", about: "Digit's pay as you drive plan offers ease and comprehensive coverage." }, { name: "ICICI Lombard", logo: "https://www.bizzbuzz.news/h upload/2022/08/26/1582647 icicic lomlourd.jpg", price: "$550", planType: "Pay As You Drive", ClaimsSettled: "96.75%", ClaimBenefits: "On Ground Support, Self video Claims, Zero Paper Claims", about: "ICICI Lombard pay as you drive provides hassle free claims." }, { name: "Reliance General Insurance", logo: "https://encrypted tbn0.gstatic.com/images?q=tbn:ANd9GcTvD9csUNSHTlYPlS1tH6JG3edrfCU_HhQhHQ&s", price: "$510", planType: "Pay As You Drive", ClaimsSettled: "98%", ClaimBenefits: "Cashless Claims, Self video Claims, Spot Claims up to 20,000", about: "Reliance General Insurance is ideal for pay as you drive options." }, { name: "ZUNO", logo: "https://indianpsu.com/wp content/uploads/2023/11/IMG 20231122 WA0033 780x439.jpg", price: "$530", planType: "Pay As You Drive", ClaimsSettled: "98%", ClaimBenefits: "Zero Paper Claims, 6 Month Repair Warranty, Free Pick up & Drop", about: "ZUNO offers hassle free pay as you drive insurance." } ] }; // Function to open modal with plan details const getPlanDetails = (planName) => { let plan; Object.keys(insurancePlans).forEach(planType => { plan = insurancePlans[planType].find(p => p.name === planName) || plan; }); if (plan) { const modalBody = document.getElementById('modal body'); modalBody.innerHTML = ` <img src="${plan.logo}" alt="${plan.name} Logo" style="width: 100px; height: auto;"> <h2>${plan.name}</h2> <p><strong>About:</strong> ${plan.about}</p> <p><strong>Price:</strong> ${plan.price}</p> <p><strong>Plan Type:</strong> ${plan.planType || plan.insuranceTypes}</p> ${plan.ClaimsSettled ? `<p><strong>Claims Settled:</strong> ${plan.ClaimsSettled}</p>` : ""} ${plan.ClaimBenefits ? `<p><strong>Claim Benefits:</strong> ${plan.ClaimBenefits}</p>` : ""} <button onclick="closeModal()">Close</button> <button onclick="buyNow('${plan.name}')">Buy Now</button> `; document.getElementById('modal').style.display = 'block'; } }; // Function to handle 'Buy Now' button click const buyNow = (planName) => { alert(`You have chosen to buy the ${planName} plan.`); }; // Function to close modal const closeModal = () => { document.getElementById('modal').style.display = 'none'; }; // Update the button onclick in createCards to use getPlanDetails instead const createCards = (planType) => { const cardContainer = document.getElementById(`${planType} cards`); insurancePlans[planType].forEach(plan => { const card = document.createElement('div'); card.className = 'card'; card.innerHTML = ` <img src="${plan.logo}" alt="${plan.name} Logo"> <h3>${plan.name}</h3> <p class="price">${plan.price}</p> <p>Plan Type: ${plan.planType || plan.insuranceTypes}</p> ${plan.ClaimsSettled ? `<p>Claims Settled: ${plan.ClaimsSettled}</p>` : ""} ${plan.ClaimBenefits ? `<p>Claim Benefits: ${plan.ClaimBenefits}</p>` : ""} <button onclick="getPlanDetails('${plan.name}')">Get Plan</button> `; cardContainer.appendChild(card); }); }; // Generate cards for each plan type ['third party', 'comprehensive', 'own damage', 'trending'].forEach(createCards); // contact deatils document.getElementById("contact link").addEventListener("click", function (event) { event.preventDefault(); const contactBox = document.getElementById("contact info box"); contactBox.style.display = contactBox.style.display === "none" ? "block" : "none"; }); // Close the contact box if clicked outside window.addEventListener("click", function (event) { const contactBox = document.getElementById("contact info box"); if (event.target !== document.getElementById("contact link") && event.target !== contactBox) { contactBox.style.display = "none"; } }); </script> </body> </html>
