Sidebar - Copy this React, Tailwind Component to your project

import React, { useState } from "react"; import Profile from "./Profile"; import MyCourser from "./MyCourser"; import CourseReviews from "./CourseReviews"; const MyProfile = () => { const [activeTab, setActiveTab] = useState("courses"); return ( <div className="justify-center"> <Profile /> {/* Tabs */} <div className=" mx-auto rounded-lg "> <button className={`flex-1 py-2 text-center ${activeTab === "courses" ? "border-b-2 border-blue-500 text-blue-500" : "text-gray-500" }`} onClick={() => setActiveTab("courses")} > Các khóa học đã tạo </button> <button className={`flex-1 py-2 text-center ${activeTab === "reviews" ? "border-b-2 border-blue-500 text-blue-500" : "text-gray-500" }`} onClick={() => setActiveTab("reviews")} > Đánh giá Bình luận </button> </div> <div className=""> {activeTab === "courses" ? <MyCourser /> : <CourseReviews />} </div> </div> ); }; export default MyProfile;