elreco
<body class="bg-gradient-to-r from-blue-400 to-blue-600 font-sans leading-normal tracking-normal h-screen flex flex-col items-center justify-center">
<div class="bg-white shadow-lg rounded-lg p-8 max-w-md w-full border border-gray-300">
<div class="text-center mb-6">
<h1 class="text-3xl font-bold">San Francisco</h1>
<p class="text-gray-600">Monday, October 10</p>
</div>
<div class="flex justify-center items-center mb-6">
<i class="iconoir-sun-light text-6xl text-yellow-500"></i>
<span class="text-6xl font-bold ml-4">72°F</span>
</div>
<div class="text-center mb-6">
<p class="text-gray-600">Partly Cloudy</p>
</div>
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<p class="text-gray-600">Now</p>
<i class="iconoir-sun-light text-2xl text-yellow-500"></i>
<p class="font-bold">72°F</p>
</div>
<div>
<p class="text-gray-600">1 PM</p>
<i class="iconoir-sun-light text-2xl text-yellow-500"></i>
<p class="font-bold">73°F</p>
</div>
<div>
<p class="text-gray-600">2 PM</p>
<i class="iconoir-sun-light text-2xl text-yellow-500"></i>
<p class="font-bold">74°F</p>
</div>
<div>
<p class="text-gray-600">3 PM</p>
<i class="iconoir-sun-light text-2xl text-yellow-500"></i>
<p class="font-bold">75°F</p>
</div>
<div>
<p class="text-gray-600">4 PM</p>
<i class="iconoir-sun-light text-2xl text-yellow-500"></i>
<p class="font-bold">76°F</p>
</div>
<div>
<p class="text-gray-600">5 PM</p>
<i class="iconoir-sun-light text-2xl text-yellow-500"></i>
<p class="font-bold">77°F</p>
</div>
</div>
<div class="mt-6">
<h2 class="text-xl font-bold mb-4">Weekly Forecast</h2>
<div class="grid grid-cols-2 gap-4">
<div class="flex justify-between items-center">
<p class="text-gray-600">Tuesday</p>
<i class="iconoir-cloud-sunny text-2xl text-gray-500"></i>
<p class="font-bold">70°F</p>
</div>
<div class="flex justify-between items-center">
<p class="text-gray-600">Wednesday</p>
<i class="iconoir-cloud-sunny text-2xl text-gray-500"></i>
<p class="font-bold">68°F</p>
</div>
<div class="flex justify-between items-center">
<p class="text-gray-600">Thursday</p>
<i class="iconoir-cloud-sunny text-2xl text-gray-500"></i>
<p class="font-bold">65°F</p>
</div>
<div class="flex justify-between items-center">
<p class="text-gray-600">Friday</p>
<i class="iconoir-cloud-sunny text-2xl text-gray-500"></i>
<p class="font-bold">67°F</p>
</div>
<div class="flex justify-between items-center">
<p class="text-gray-600">Saturday</p>
<i class="iconoir-cloud-sunny text-2xl text-gray-500"></i>
<p class="font-bold">69°F</p>
</div>
<div class="flex justify-between items-center">
<p class="text-gray-600">Sunday</p>
<i class="iconoir-cloud text-2xl text-gray-500"></i>
<p class="font-bold">71°F</p>
</div>
</div>
</div>
</div>
</body>