Skeleton Loading for React Tailwind Components

Build me a skeleton loading component with the reference to the code given below. in the component while loading only the elements should give effect of minimal glowing or shining, not the whole component. the component also should compatible with the tailwind dark class utility. ```my applied custom CSS code for the book and book shine class in the normal card after data is loaded: @media only screen and (min width: 1024px) { .book { transform style: preserve 3d; transform: perspective(300px) rotateY( 3deg); } .book:before, .book:after { position: absolute; content: " "; z index: 1; } .book:before { width: 100%; left: 7.5%; height: 96%; top: 2%; background color: #000; } .book:after { width: 8%; left: 100%; height: 94%; top: 3%; background color: #efefef; box shadow: inset 0 0 5px #767676; moz transform: rotateY(20deg); webkit transform: perspective(300) rotateY(20deg); transform: perspective(300px) rotateY(20deg); } } .book shine::before { @apply absolute group hover:book hover h full w 10 left 32 top 1 bg gradient to r from transparent via [rgba(255,255,255,0.7)] to transparent; content: ""; transform: skewX( 30deg); z index: 10; } .book shine::before:hover, .group:hover .group hover\:book hover { animation: coverShine 0.5s linear; } @keyframes coverShine { to { left: 110%; } }``` and ```CODE <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>```