Historical a I Chat - 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