Spotlight Carousel - Copy this React, Tailwind Component to your project

Please fix my spotlight component, is a carousel but I need it to be perfect for pc and mobile devices, there is some problems with positioning and dimensions: import React from 'react'; import { Carousel } from 'flowbite react'; import "styles/tailwind.css"; import { getPlayerImage, getAge } from "services/helpers.js"; const Spotlight = ({ topPlayers }) => { if (!topPlayers || topPlayers.length === 0) { return <p className="text center text white py 5">No hay jugadores destacados.</p>; } return ( <div className="mx auto my 12 w 4/5 h [500px] bg gradient to r from gray 800 via gray 900 to black rounded lg overflow hidden "> {/* Title */} <div className="absolute top 5 left 1/2 transform translate x 1/2 text center text white relative"> <div className="text 6xl font extrabold text transparent bg clip text bg gradient to r from emerald 300 via emerald 400 to emerald 500"> Nuestras Estrellas </div> </div> <Carousel indicators={true} className="h full"> {topPlayers.map((player, index) => { let rankGradient; let nameGradient; // Apply different gradients based on ranking if (index === 0) { rankGradient = "bg gradient to r from yellow 200 to yellow 300"; // Gold nameGradient = "bg gradient to r from yellow 200 to yellow 300"; // Gold } else if (index === 1) { rankGradient = "bg gradient to r from gray 300 to gray 400"; // Platinum nameGradient = "bg gradient to r from gray 300 to gray 400"; // Platinum } else if (index === 2) { rankGradient = "bg gradient to r from orange 300 to orange 400"; // Bronze nameGradient = "bg gradient to r from orange 300 to orange 400"; // Bronze } else { rankGradient = "bg gradient to r from gray 200 to gray 300"; // Default gray nameGradient = "bg gradient to r from gray 200 to gray 300"; // Default gray } return ( <div key={player.id} className="flex h full"> <div className="w 1/3 h full flex justify center items center"> <div className="relative h [300px] w [300px] overflow hidden rounded lg shadow lg"> <img src={getPlayerImage(player.photo)} alt={`Imagen del Jugador ${player.first_name} ${player.last_name}`} className="w full h full object cover" /> </div> </div> <div className="w 2/3 flex flex col justify center p 6 text white"> <h3 className={`text 3xl font bold text transparent bg clip text ${nameGradient}`}> {player.first_name} {player.last_name} </h3> <p className="text lg italic text gray 300">{player.alias || 'Alias no disponible'}</p> <div className="mt 4 flex items center"> <span className={`text 5xl font bold text transparent bg clip text ${rankGradient}`}> #{index + 1} </span> <div className="ml 4 border l border gray 300 pl 4"> <p className="text lg font bold"> {player.nationality ? ( <img src={`https://flagsapi.com/${player.nationality}/flat/32.png`} alt={`Bandera de ${player.nationality}`} className="inline block" /> ) : ( 'N/D' )} {player.nationality || 'N/D'} </p> <p className="text lg"> {getAge(player.date_of_birth) ? ( <> {getAge(player.date_of_birth)} <span className="text sm">años</span> </> ) : ( 'Edad no disponible' )} </p> </div> </div> </div> </div> ); })} </Carousel> </div> ); }; export default Spotlight;