Skeleton Loader - Copy this React, Tailwind Component to your project

Build me a skeleton loading for the code given below. ```<div key={novel._id} className="h full w full cursor pointer" onClick={() => { navigate(`/novel/${novel._id}`); }} > <div className="group w full h 52 sm:h 80 dark:text gray 200 rounded t md overflow hidden relative"> <img src={novel.coverImage} alt="" className="w 3/5 object cover translate y 28" /> <div className="w full h full text black dark:text white p 5 backdrop blur sm absolute top 0 bg gradient to l from slate 200 via slate 100 dark:from zinc 950 dark:via gray 900 to transparent"> <div className="sm:m 3 sm:mx 10 flex justify start "> <div className="relative w 1/3 lg:w 1/5 flex justify center hover:scale 105 duration 300"> <div className="group book absolute inset 0 sm:w 44 h 36 sm:h 64 sm:max h 72 object cover "> <BlurImage img={ <img src={novel.coverImage} alt="" className="rounded md lg:rounded none drop shadow 2xl shadow xl shadow indigo 500/40 group hover:shadow indigo 500 duration 300 transition shadow ease in out" /> } /> </div> </div> <div className="w 2/3 lg:w 3/5 ml 2 sm:ml 5 sm:space y 1 "> <h1 className="sm:text 2xl lg:text 3xl font bold sm:mt 2 uppercase p text"> {novel.title} </h1> <h2 className="sm:text xl text xs text gray 800 dark:text gray 300"> By {novel.author} </h2> <span className="text xs sm:mb 3 flex justify between"> <div className="px 1 pb 0.5 rounded sm bg blue 600 text white"> {novel.chaptersCount} </div> </span> {novel.avgRating && ( <div className="text xs mt 0.5 flex items center justify start gap 1"> <div className="font bold rounded full pb 0.5 px 1.5 bg orange 500"> {novel.avgRating ?.toFixed(1) .replace(/\.0$/, "")} </div> {novel.avgRating !== 0 && ( <div className="flex items center"> {[...new Array(5)].map( (_, index) => { let num = index + 0.5; return ( <span key={ index } > {novel.avgRating >= index + 1 ? ( <FaStar color="yellow" /> ) : novel.avgRating >= num ? ( <FaRegStarHalfStroke color="yellow" /> ) : ( <FaRegStar color="yellow" /> )} </span> ); } )} </div> )} </div> )} <h3 className="">{novel.genre}</h3> <div className="text xs sm:text sm p text" style={{ " line no": 3 }} > {parse(`${novel.description}`)} </div> </div> </div> </div> </div> </div>```