<body class="bg-gray-100 font-sans leading-normal tracking-normal p-6"> <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-8"> <h1 class="text-2xl font-bold mb-6 text-center">EV Wallbox Charging Data</h1> <div class="flex flex-col space-y-6"> <div class="flex justify-between items-center p-4 border-b"> <div> <h2 class="text-xl font-semibold">Actual Charging Current</h2> <p class="text-gray-600">Current charging current in Amperes.</p> </div> <p class="text-3xl text-blue-600">32 A</p> </div> <div class="flex justify-between items-center p-4 border-b"> <div> <h2 class="text-xl font-semibold">Total Energy</h2> <p class="text-gray-600">Total energy consumed during charging.</p> </div> <p class="text-3xl text-blue-600">120 kWh</p> </div> <div class="flex justify-between items-center p-4 border-b"> <div> <h2 class="text-xl font-semibold">Charging Session Duration</h2> <p class="text-gray-600">Duration of the current charging session.</p> </div> <p class="text-3xl text-blue-600">2h 15m</p> </div> </div> <div class="mt-6 flex justify-between"> <button class="bg-red-500 text-white py-2 px-4 rounded hover:bg-red-400 transition duration-300"> Stop Charging </button> <button class="bg-yellow-500 text-white py-2 px-4 rounded hover:bg-yellow-400 transition duration-300"> Set Schedule </button> </div> </div> </body>