App - 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>Online Learning Home</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg gray 100 text gray 800"> <! Header > <header class="bg white shadow p 4 flex items center justify between"> <div class="flex items center space x 4"> <img src="logo.png" alt="Logo" class="h 8" /> <nav class="space x 6 text sm font semibold"> <a href="#">Explore</a> <a href="#">Become Teacher</a> <a href="#">My Learning</a> </nav> </div> <div class="flex items center space x 4"> <input type="text" placeholder="Search" class="border rounded px 2 py 1" /> <span class="material icons">shopping_cart</span> <span class="material icons">favorite</span> <div class="w 8 h 8 bg gray 300 rounded full flex items center justify center text sm">A</div> </div> </header> <! Banner > <section class="bg white p 4"> <div class="relative w full h 40 bg orange 100 rounded lg flex items center justify between px 6"> <div class="text xl font semibold"> Sales ends today<br /> <span class="text sm font normal">Learn from just 269,000đ now.</span> </div> <img src="banner.png" alt="Banner" class="h 36" /> </div> </section> <! Recommended > <section class="p 6 bg white mt 4"> <h2 class="text lg font semibold mb 4">Recommend for you</h2> <div class="grid grid cols 5 gap 4"> <! Course card > <div class="bg white border p 2 rounded text center shadow"> <img src="course.jpg" alt="Course" class="w full h 32 object cover rounded" /> <p class="font bold mt 2">Name Course</p> <p class="text sm text gray 500">Owner/Teacher</p> <p class="text sm mt 1">⭐️⭐️⭐️⭐️☆</p> <p class="font bold mt 1">[Course price]</p> </div> <! Copy card x4 > </div> </section> <! Popular for Beginner > <section class="p 6 bg white mt 4"> <h2 class="text lg font semibold mb 4">Popular for Beginner</h2> <div class="grid grid cols 5 gap 4"> <! Copy course cards here > </div> </section> <! Achievements > <section class="p 6 bg white mt 4"> <h2 class="text lg font semibold mb 4">See others' learning achievements.</h2> <div class="grid grid cols 4 gap 4"> <! Achievement card > <div class="border p 4 rounded text center shadow"> <p class="italic">“Comment”</p> <div class="mt 2"> <div class="w 12 h 12 bg gray 300 rounded full mx auto"></div> <p class="mt 1 font semibold">Person name</p> <p class="text sm text gray 500">Course name, etc</p> <a href="#" class="text blue 500 text sm mt 2 inline block">View course ➜</a> </div> </div> <! Copy card x3 > </div> </section> <! Footer > <footer class="bg gray 800 text white p 6 mt 6 text sm grid grid cols 3 gap 6"> <div> <h3 class="font bold mb 2">About</h3> <ul> <li>About us</li> <li>Contact us</li> <li>Careers</li> </ul> </div> <div> <h3 class="font bold mb 2">Discover</h3> <ul> <li>Teach on</li> <li>Help or Support</li> </ul> </div> <div> <h3 class="font bold mb 2">Legal & Accessibility</h3> <ul> <li>Privacy policy</li> <li>Terms</li> <li>Sitemap</li> </ul> </div> </footer> </body> </html>
