Bottom Drawer - Copy this React, Tailwind Component to your project

{selectedSite && ( <div className="absolute bottom 2 w full z 10 px 3"> <CardHero isBlurred className="border none bg background/60 dark:bg default 100/50 max w full h full" shadow="md"> <CardBody> <div className="grid grid cols 1 md:grid cols 12 gap 4 items center"> <div className="flex flex col md:col span 6 gap 4"> <div className="flex items center gap 2"> <MapPin className="w 6 h 6 md:w 8 md:h 8 text red 600" /> <h1 className="font bold text foreground/90 text lg md:text xl lg:text 2xl line clamp none"> {selectedSite?.name} </h1> </div> <div className="flex flex col gap 1"> <div className="flex items center bg [#CEF3FE] space x 2 p 1"> <Image src="/icon/rank.png" alt="Rank Icon" width={20} height={20} /> <p className="text sm md:text base text gray 800 font bold line clamp 1"> {selectedSite?.heritageRankName} </p> </div> <div className="flex items center space x 2 p 1"> <Image src="/icon/place.png" alt="Rank Icon" width={20} height={20} /> <p className="text sm md:text base text gray 800 font bold line clamp 1"> {selectedSite?.districtName} </p> </div> </div> </div> <div className="relative md:col span 6"> <ImageUI alt="Album cover" className="object cover rounded lg" height="80%" shadow="md" src={ selectedSite?.medias?.find((media) => media.isThumbnail)?.mediaUrl || "https://heroui.com/images/album cover.png" || "/placeholder.svg" || "/placeholder.svg" } width="100%" /> </div> </div> </CardBody> </CardHero> </div> )} responsive this to me, when in mobile I want it's a bottom drawer