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>