Course Reviews - Copy this React, Tailwind Component to your project
import React from "react"; // Sample review data const reviews = [ { id: 1, name: "Thach Dang", timeAgo: "2 weeks ago", rating: 5, comment: "The course is very good.", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" }, { id: 2, name: "Phòng T.", timeAgo: "3 weeks ago", rating: 5, comment: "Amazing", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" }, { id: 3, name: "No Sung M.", timeAgo: "6 months ago", rating: 4, comment: "Good, what I expected", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" }, { id: 4, name: "Dao Minh H.", timeAgo: "8 months ago", rating: 5, comment: "Tuyệt vời a", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" }, { id: 5, name: "Thach Dang", timeAgo: "2 weeks ago", rating: 5, comment: "The course is very good.", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" }, { id: 6, name: "No Sung M.", timeAgo: "6 months ago", rating: 4, comment: "Good, what I expected", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" }, { id: 7, name: "Phòng T.", timeAgo: "3 weeks ago", rating: 5, comment: "Amazing", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" }, ]; const CourseReviews = () => { return ( <div className="max-w-[950px] mx-auto bg-white rounded-lg shadow py-16 px-4"> <h2 className="text-2xl font-bold">Course Reviews</h2> <div className="grid grid-cols-1 md:grid-cols-1 gap-4 mt-4"> {reviews.map((review, index) => ( <div key={index} className="bg-white p-4 shadow rounded-lg"> <div className="flex items-center"> <div className="flex-1"> <h3 className="font-semibold">{review.name}</h3> <p className="text-sm text-gray-500">{review.timeAgo}</p> </div> <p className="text-yellow-500 font-bold">{Array(review.rating).fill("⭐")}</p> </div> <p className="mt-2">{review.comment}</p> </div> ))} </div> {/* Button to see all reviews */} <div className="mt-4"> <button className="bg-blue-500 text-white py-2 px-4 rounded"> View all reviews </button> </div> </div> ); }; export default CourseReviews; như này sửa lại scroll ở tại <div className="grid grid-cols-1 md:grid-cols-1 gap-4 mt-4">
