Mock Complaints - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import { FiShoppingCart, FiHeart, FiUser, FiSearch, FiStar, FiClock } from "react-icons/fi"; const App = () => { const [isDarkMode, setIsDarkMode] = useState(false); const courses = [ { id: 1, title: "Complete Web Development Bootcamp", instructor: "Sarah Johnson", rating: 4.8, price: 89.99, image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085" }, { id: 2, title: "Advanced Machine Learning", instructor: "David Chen", rating: 4.9, price: 129.99, image: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb" }, { id: 3, title: "UI/UX Design Masterclass", instructor: "Emma Wilson", rating: 4.7, price: 69.99, image: "https://images.unsplash.com/photo-1559028012-481c04fa702d" }, { id: 4, title: "Python for Data Science", instructor: "Michael Brown", rating: 4.9, price: 99.99, image: "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5" }, { id: 5, title: "Digital Marketing Essential", instructor: "Lisa Anderson", rating: 4.6, price: 79.99, image: "https://images.unsplash.com/photo-1557838923-2985c318be48" } ]; const achievements = [ { id: 1, name: "John Doe", quote: "This course transformed my career path completely!", course: "Web Development Bootcamp", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" }, { id: 2, name: "Alice Smith", quote: "Best investment in my learning journey so far.", course: "Machine Learning", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80" }, { id: 3, name: "Robert Wilson", quote: "Exceptional content and great instructor support.", course: "UI/UX Design", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e" }, { id: 4, name: "Emily Brown", quote: "Practical knowledge that I use every day at work.", course: "Python Programming", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330" } ]; return ( <div className={`min-h-screen ${isDarkMode ? "dark" : ""}`}> <div className="bg-background dark:bg-dark-background text-foreground dark:text-dark-foreground"> {/* Header */} <header className="sticky top-0 z-50 bg-card dark:bg-dark-card shadow-sm"> <div className="container mx-auto px-4 py-4 flex items-center justify-between"> <div className="flex items-center space-x-8"> <img src="https://images.unsplash.com/photo-1516876437184-593fda40c7ce" alt="Logo" className="h-8 w-auto" /> <nav className="hidden md:flex space-x-6"> <a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Courses</a> <a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Programs</a> <a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Resources</a> <a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Enterprise</a> </nav> </div> <div className="flex items-center space-x-6"> <div className="hidden md:flex items-center bg-secondary dark:bg-dark-secondary rounded-full px-4 py-2"> <FiSearch className="text-muted-foreground" /> <input type="text" placeholder="Search courses..." className="bg-transparent border-none focus:outline-none ml-2 w-48" /> </div> <button onClick={() => setIsDarkMode(!isDarkMode)} className="p-2 rounded-full hover:bg-secondary dark:hover:bg-dark-secondary transition"> {isDarkMode ? "🌞" : "🌙"} </button> <FiShoppingCart className="h-6 w-6 cursor-pointer hover:text-primary dark:hover:text-dark-primary transition" /> <FiHeart className="h-6 w-6 cursor-pointer hover:text-primary dark:hover:text-dark-primary transition" /> <FiUser className="h-6 w-6 cursor-pointer hover:text-primary dark:hover:text-dark-primary transition" /> </div> </div> </header> {/* Sales Banner */} <div className="bg-primary dark:bg-dark-primary text-primary-foreground dark:text-dark-primary-foreground py-8"> <div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between"> <div className="text-center md:text-left mb-6 md:mb-0"> <h2 className="text-2xl font-bold mb-2">Spring Sale is Live! 🎉</h2> <p className="text-lg">Get 50% off on all courses</p> <div className="flex items-center mt-4"> <FiClock className="mr-2" /> <span>Ends in 48 hours</span> </div> </div> <button className="bg-accent dark:bg-dark-accent text-accent-foreground dark:text-dark-accent-foreground px-6 py-3 rounded-full font-semibold hover:opacity-90 transition"> Browse Courses </button> </div> </div> {/* Course Sections */} <div className="container mx-auto px-4 py-12"> {/* Recommended Courses */} <section className="mb-16"> <h2 className="text-2xl font-bold mb-8">Recommended Courses</h2> <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6"> {courses.map((course) => ( <div key={course.id} className="bg-card dark:bg-dark-card rounded-lg overflow-hidden shadow-sm hover:shadow-md transition"> <img src={course.image} alt={course.title} className="w-full h-48 object-cover" /> <div className="p-4"> <h3 className="font-semibold mb-2">{course.title}</h3> <p className="text-sm text-muted-foreground dark:text-dark-muted-foreground mb-2">{course.instructor}</p> <div className="flex items-center mb-2"> <FiStar className="text-chart-4" /> <span className="ml-1">{course.rating}</span> </div> <p className="font-bold">${course.price}</p> </div> </div> ))} </div> </section> {/* Popular for Beginners */} <section> <h2 className="text-2xl font-bold mb-8">Popular for Beginners</h2> <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6"> {courses.slice().reverse().map((course) => ( <div key={course.id} className="bg-card dark:bg-dark-card rounded-lg overflow-hidden shadow-sm hover:shadow-md transition"> <img src={course.image} alt={course.title} className="w-full h-48 object-cover" /> <div className="p-4"> <h3 className="font-semibold mb-2">{course.title}</h3> <p className="text-sm text-muted-foreground dark:text-dark-muted-foreground mb-2">{course.instructor}</p> <div className="flex items-center mb-2"> <FiStar className="text-chart-4" /> <span className="ml-1">{course.rating}</span> </div> <p className="font-bold">${course.price}</p> </div> </div> ))} </div> </section> </div> {/* Achievements Section */} <div className="bg-secondary dark:bg-dark-secondary py-12"> <div className="container mx-auto px-4"> <h2 className="text-2xl font-bold mb-8 text-center">Student Success Stories</h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> {achievements.map((achievement) => ( <div key={achievement.id} className="bg-card dark:bg-dark-card p-6 rounded-lg"> <img src={achievement.avatar} alt={achievement.name} className="w-16 h-16 rounded-full mx-auto mb-4" /> <p className="text-center mb-4">"{achievement.quote}"</p> <p className="text-center font-semibold">{achievement.name}</p> <p className="text-center text-sm text-muted-foreground dark:text-dark-muted-foreground">{achievement.course}</p> <button className="mt-4 w-full text-center text-primary dark:text-dark-primary hover:underline"> View Course </button> </div> ))} </div> </div> </div> {/* Footer */} <footer className="bg-card dark:bg-dark-card text-foreground dark:text-dark-foreground py-12"> <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8"> <div> <h3 className="font-bold text-lg mb-4">About Us</h3> <ul className="space-y-2"> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Our Story</a></li> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Careers</a></li> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Press</a></li> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Blog</a></li> </ul> </div> <div> <h3 className="font-bold text-lg mb-4">Discover</h3> <ul className="space-y-2"> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Browse Courses</a></li> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Student Success</a></li> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Teaching</a></li> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Enterprise</a></li> </ul> </div> <div> <h3 className="font-bold text-lg mb-4">Legal</h3> <ul className="space-y-2"> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Terms of Service</a></li> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Privacy Policy</a></li> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Cookie Policy</a></li> <li><a href="#" className="hover:text-primary dark:hover:text-dark-primary transition">Accessibility</a></li> </ul> </div> </div> </footer> </div> </div> ); }; export default App; module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx,html}", ], theme: { extend: { colors: { primary: { DEFAULT: "#0077B6", foreground: "#FFFFFF", }, secondary: { DEFAULT: "#F0F1F3", foreground: "#03045E", }, accent: { DEFAULT: "#00B4D8", foreground: "#03045E", }, background: "#CAF0F8", foreground: "#03045E", card: { DEFAULT: "#FFFFFF", foreground: "#03045E", }, popover: { DEFAULT: "#FFFFFF", foreground: "#03045E", }, muted: { DEFAULT: "#F0F1F3", foreground: "#00B4D8", }, destructive: { DEFAULT: "#FF4C4C", foreground: "#FFFFFF", }, border: "#E0E0E0", input: "#E0E0E0", ring: "#0077B6", chart: { 1: "#FF6F61", 2: "#4CAF50", 3: "#03A9F4", 4: "#FFC107", 5: "#8E44AD", }, dark: { primary: "#0077B6", "primary-foreground": "#FFFFFF", secondary: "#1E2A4B", "secondary-foreground": "#CAF0F8", accent: "#00B4D8", "accent-foreground": "#CAF0F8", background: "#03045E", foreground: "#CAF0F8", card: "#121212", "card-foreground": "#CAF0F8", popover: "#121212", "popover-foreground": "#CAF0F8", muted: "#1E2A4B", "muted-foreground": "#00B4D8", destructive: "#FF4C4C", "destructive-foreground": "#FFFFFF", border: "#3C3C3C", input: "#3C3C3C", ring: "#0077B6", }, }, borderRadius: { sm: "0.125rem", }, boxShadow: { sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)", }, fontFamily: { inter: ["Inter", "sans-serif"], }, fontSize: { heading: "28px", body: "16px", }, fontWeight: { heading: "600", body: "400", }, }, }, plugins: [], darkMode: "class", }tôi muốn bạn kết nối 2 giao diện này lại