Progress Component - Copy this React, Tailwind Component to your project

Làm lại đẹp hơn <div className="max w screen xl mx auto px 4 py 2 sm:px 6 sm:py 4 md:px 8 md:py 6"> <div className="bg white rounded lg shadow lg p 4 md:p 6 mb 4 flex flex col md:flex row items center md:justify between"> {/* Cấp độ */} <div className="mb 4 md:mb 0"> <h3 className="text lg md:text xl font bold">Level: 5</h3> <p className="text gray 600 text sm">Tăng cấp bằng cách hoàn thành khóa học!</p> </div> {/* Tiến độ tổng */} <div className="w full max w xs mb 4 md:mb 0"> <div className="relative w full bg gray 200 rounded full h 3"> <div className="absolute top 0 left 0 h 3 bg blue 500 rounded full" style={{ width: "75%" }} ></div> </div>0 /1 kỹ năng {/* <span className="text sm text gray 600">75% hoàn thành</span> */} </div> {/* Điểm, ngọn lửa và huy hiệu */} <div className="flex items center space x 6"> {/* Điểm */} <div className="text center"> <div className="bg gradient to r from blue 500 to green 500 text white text lg md:text xl font bold py 1 px 3 rounded lg"> 1075 Points </div> </div> {/* Ngọn lửa và số ngày liên tục */} <div className="flex items center space x 2"> <div className="flex items center"> <svg xmlns="http://www.w3.org/2000/svg" className="h 6 w 6 text red 500" viewBox="0 0 20 20" fill="currentColor" > <path d="M8.197 3.132A8.001 8.001 0 0115 9c0 3.866 3.582 7 8 7 4.418 0 8 3.134 8 7 0 1.493.44 2.878 1.199 4.068a.25.25 0 01.375 .02A5.978 5.978 0 004 4c1.181 0 2.281.332 3.197.868zM4.5 8.5a.5.5 0 10 1 0v1a.5.5 0 101 0v 1zm3 .5a.5.5 0 00 .5 .5H6v1h1a.5.5 0 00.5 .5zm.5 2.5a.5.5 0 01.5 .5H8V9h 1a.5.5 0 01 .5.5H6v1h1a.5.5 0 01.5 .5z" /> </svg> <span className="ml 1 text lg font bold text gray 700">3</span> </div> <p className="text sm text gray 500">Ngày liên tiếp</p> </div> </div> </div> </div>