<div id="root"></div>
* img {
  border-radius:900px
}
/* Estilos base */
body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Animaciones y estados para botones */
.btn-primary {
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: rgb(126, 34, 206) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(126, 34, 206, 0.25);
}

.btn-primary:active {
  background-color: rgb(107, 33, 168) !important;
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-icon {
    transition: all 0.2s ease-in-out;
    width: 40px;
    height: 40px;
}

.btn-icon:hover {
  background-color: rgb(237, 233, 254);
  color: rgb(126, 34, 206) !important;
}

.btn-icon:active {
  transform: scale(0.95);
  background-color: rgb(237, 233, 254);
}

.nav-item {
  transition: all 0.2s ease-in-out;
}

.nav-item:hover {
  transform: translateY(-2px);
  color: rgb(126, 34, 206) !important;
}

.nav-item:active {
  transform: translateY(0);
  color: rgb(107, 33, 168) !important;
}

.material-icons {
  font-size: 24px;
}

const { useState } = React;

function App() {
  const [activeTab, setActiveTab] = useState('home');
  
  const statsOverview = {
    availability: { label: 'Disponibilidad', value: '05', subvalue: '8' },
    performance: { label: 'Rendimiento', value: '148', icon: 'refresh' }
  };
  
  const vehicleList = [
    { 
      name: 'Tesla Model 3', 
      time: '08:00 - 16:00', 
      value: '19,525',
      img: 'https://i.ibb.co/ZGrVsBh/c0c86221-9eb6-4640-89db-ac9b02d2e756-2.png'
    },
    { 
      name: 'BMW i4', 
      time: '09:30 - 18:00', 
      value: '61,393',
      img: 'https://i.ibb.co/FBTSC3s/c0c86221-9eb6-4640-89db-ac9b02d2e756-3.png'
    },
    { 
      name: 'Mercedes EQC', 
      time: '07:00 - 15:30', 
      value: '43,293',
      img: 'https://i.ibb.co/tZ4pVR9/eb8c5851-80da-4130-bf91-6cefa340f857-1.png'
    },
    { 
      name: 'Audi e-tron', 
      time: '10:00 - 19:00', 
      value: '39,153',
      img: 'https://i.ibb.co/9G0YnyG/eb8c5851-80da-4130-bf91-6cefa340f857-2.png'
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-600 to-purple-400 p-6">
      
    
      
      <div className="max-w-md mx-auto space-y-6 flexme">
        
       
        
        {/* Primera pantalla */}
        <div className="bg-white rounded-3xl p-6 shadow-xl">
          
             <div className="flex justify-between items-center px-1 h-11 bg-white rounded-t-3xl">
      <span className="text-black text-sm font-medium">9:34</span>
      <div className="flex items-center space-x-2">
        <span className="material-icons text-black text-sm">signal_cellular_alt</span>
        <span className="material-icons text-black text-sm">wifi</span>
        <span className="material-icons text-black text-sm">battery_full</span>
      </div>
    </div>
          
          <div className="flex justify-between items-center mb-6">
            <div className="flex items-center gap-4">
              <button className="btn-icon p-2 rounded-full">
                <span className="material-icons text-gray-600">menu</span>
              </button>
              <h1 className="text-xl">Fleet Manager</h1>
            </div>
            <button className="btn-icon p-2 rounded-full">
              <span className="material-icons text-gray-600">schedule</span>
            </button>
          </div>

          <h2 className="text-2xl font-bold mb-2">Flota Eléctrica</h2>
          <p className="text-gray-600 mb-6">Estado actual</p>

          <div className="grid grid-cols-2 gap-4 mb-8">
            <div className="bg-gray-50 rounded-xl p-4">
              <p className="text-gray-500 text-sm">Vehículos Activos</p>
              <div className="flex items-end justify-between">
                <span className="text-3xl font-bold">{statsOverview.availability.value}</span>
                <span className="text-xl text-gray-400">/{statsOverview.availability.subvalue}</span>
              </div>
            </div>
            <div className="bg-gray-50 rounded-xl p-4">
              <p className="text-gray-500 text-sm">Eficiencia</p>
              <div className="flex items-center justify-between">
                <span className="text-3xl font-bold">{statsOverview.performance.value}%</span>
                <span className="material-icons text-purple-600">refresh</span>
              </div>
            </div>
          </div>

          <h3 className="text-xl font-semibold mb-4">Vehículos en Ruta</h3>
          <div className="space-y-4 mb-6">
            {vehicleList.map((vehicle, index) => (
              <div key={index} className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <img src={vehicle.img} alt={vehicle.name} className="w-12 h-12 rounded-lg object-cover"/>
                  <div>
                    <p className="font-medium">{vehicle.name}</p>
                    <p className="text-sm text-gray-500">{vehicle.time}</p>
                  </div>
                </div>
                <p className="font-semibold">${vehicle.value}</p>
              </div>
            ))}
          </div>

          <button className="btn-primary w-full bg-purple-600 text-white py-3 rounded-xl font-semibold">
            Ver Detalles
          </button>
        </div>

        {/* Segunda pantalla */}
        <div className="bg-white rounded-3xl p-6 shadow-xl">
          
             <div className="flex justify-between items-center px-1 h-11 bg-white rounded-t-3xl">
      <span className="text-black text-sm font-medium">9:34</span>
      <div className="flex items-center space-x-2">
        <span className="material-icons text-black text-sm">signal_cellular_alt</span>
        <span className="material-icons text-black text-sm">wifi</span>
        <span className="material-icons text-black text-sm">battery_full</span>
      </div>
    </div>
          
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-4">
              <button className="btn-icon p-2 rounded-full">
                <span className="material-icons text-gray-600">arrow_back</span>
              </button>
              <h2 className="text-xl">Detalles del Vehículo</h2>
            </div>
            <button className="btn-icon p-2 rounded-full">
              <span className="material-icons text-gray-600">more_vert</span>
            </button>
          </div>

          <div className="bg-purple-50 rounded-3xl p-8 mb-6 flex items-center justify-center">
            <img 
              src="https://i.ibb.co/9G0YnyG/eb8c5851-80da-4130-bf91-6cefa340f857-2.png" 
              alt="Vehículo seleccionado" 
              className="w-64 h-64 object-contain"
            />
          </div>

          <h3 className="text-2xl font-bold mb-6">Tesla Model 3 Performance</h3>

          <div className="space-y-4 mb-6">
            <div className="flex items-center gap-3">
              <div className="bg-purple-600 p-2 rounded-lg">
                <span className="material-icons text-white">electric_car</span>
              </div>
              <div>
                <p className="text-sm text-gray-500">Autonomía</p>
                <p className="font-medium">507 km</p>
              </div>
            </div>
            <div className="flex items-center gap-3">
              <div className="bg-purple-600 p-2 rounded-lg">
                <span className="material-icons text-white">location_on</span>
              </div>
              <div>
                <p className="text-sm text-gray-500">Ubicación actual</p>
                <p className="font-medium">Centro de la ciudad</p>
              </div>
            </div>
          </div>

          <button className="btn-primary w-full bg-purple-600 text-white py-3 rounded-xl font-semibold mb-6">
            Reservar Vehículo
          </button>

          <div className="flex justify-between px-6">
            {['home', 'favorite', 'dashboard', 'person', 'settings'].map((icon) => (
              <button 
                key={icon}
                className={`nav-item flex flex-col items-center ${
                  activeTab === icon ? 'text-purple-600' : 'text-gray-400'
                }`}
                onClick={() => setActiveTab(icon)}
              >
                <span className="material-icons">{icon}</span>
                <span className="text-xs mt-1">
                  {icon.charAt(0).toUpperCase() + icon.slice(1)}
                </span>
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
View Compiled

External CSS

  1. https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css
  2. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js