Weather Components - TailwindCSS

1. Basic Weather Card

Simple weather card displaying current temperature and conditions.

☀️

72°F

Sunny

New York, NY

<!-- Basic Weather Card -->
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-lg">
  <div class="text-center">
    <div class="text-6xl mb-2">☀️</div>
    <div class="text-3xl font-bold text-gray-900">72°F</div>
    <div class="text-gray-600">Sunny</div>
    <div class="text-sm text-gray-500 mt-2">New York, NY</div>
  </div>
</div>

<template>
  <!-- Basic Weather Card -->
  <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-lg">
    <div class="text-center">
      <div class="text-6xl mb-2">☀️</div>
      <div class="text-3xl font-bold text-gray-900">72°F</div>
      <div class="text-gray-600">Sunny</div>
      <div class="text-sm text-gray-500 mt-2">New York, NY</div>
    </div>
  </div>
</template>

export default function BasicWeatherCard() {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-lg">
      <div className="text-center">
        <div className="text-6xl mb-2">☀️</div>
        <div className="text-3xl font-bold text-gray-900">72°F</div>
        <div className="text-gray-600">Sunny</div>
        <div className="text-sm text-gray-500 mt-2">New York, NY</div>
      </div>
    </div>
  );
}

2. Weather Widget with Details

Weather widget with additional details like humidity and wind speed.

🌤️

68°F

Partly Cloudy

Humidity

65%

Wind

8 mph

<!-- Weather Widget with Details -->
<div class="bg-gradient-to-br from-blue-400 to-blue-600 text-white rounded-lg p-6 shadow-sm max-w-lg">
  <div class="text-center mb-4">
    <div class="text-5xl mb-2">🌤️</div>
    <div class="text-4xl font-bold">68°F</div>
    <div class="text-blue-100">Partly Cloudy</div>
  </div>
  <div class="grid grid-cols-2 gap-4 text-sm">
    <div class="text-center">
      <div class="text-blue-100">Humidity</div>
      <div class="font-bold">65%</div>
    </div>
    <div class="text-center">
      <div class="text-blue-100">Wind</div>
      <div class="font-bold">8 mph</div>
    </div>
  </div>
</div>

<template>
  <!-- Weather Widget with Details -->
  <div class="bg-gradient-to-br from-blue-400 to-blue-600 text-white rounded-lg p-6 shadow-sm max-w-lg">
    <div class="text-center mb-4">
      <div class="text-5xl mb-2">🌤️</div>
      <div class="text-4xl font-bold">68°F</div>
      <div class="text-blue-100">Partly Cloudy</div>
    </div>
    <div class="grid grid-cols-2 gap-4 text-sm">
      <div class="text-center">
        <div class="text-blue-100">Humidity</div>
        <div class="font-bold">65%</div>
      </div>
      <div class="text-center">
        <div class="text-blue-100">Wind</div>
        <div class="font-bold">8 mph</div>
      </div>
    </div>
  </div>
</template>

export default function WeatherWidgetWithDetails() {
  return (
    <div className="bg-gradient-to-br from-blue-400 to-blue-600 text-white rounded-lg p-6 shadow-sm max-w-lg">
      <div className="text-center mb-4">
        <div className="text-5xl mb-2">🌤️</div>
        <div className="text-4xl font-bold">68°F</div>
        <div className="text-blue-100">Partly Cloudy</div>
      </div>
      <div className="grid grid-cols-2 gap-4 text-sm">
        <div className="text-center">
          <div className="text-blue-100">Humidity</div>
          <div className="font-bold">65%</div>
        </div>
        <div className="text-center">
          <div className="text-blue-100">Wind</div>
          <div className="font-bold">8 mph</div>
        </div>
      </div>
    </div>
  );
}

3. Weather Forecast

5-day weather forecast with daily high/low temperatures.

5-Day Forecast

☀️ Today

72° 65°

🌤️ Tomorrow

75° 68°

☁️ Wed

70° 62°

<!-- Weather Forecast -->
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-md">
  <h3 class="text-lg font-bold mb-4 text-center">5-Day Forecast</h3>
  <div class="space-y-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <span class="text-2xl mr-3">☀️</span>
        <span class="font-medium">Today</span>
      </div>
      <div class="text-right">
        <span class="font-bold">72°</span>
        <span class="text-gray-500 ml-2">65°</span>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <span class="text-2xl mr-3">🌤️</span>
        <span class="font-medium">Tomorrow</span>
      </div>
      <div class="text-right">
        <span class="font-bold">75°</span>
        <span class="text-gray-500 ml-2">68°</span>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <span class="text-2xl mr-3">☁️</span>
        <span class="font-medium">Wed</span>
      </div>
      <div class="text-right">
        <span class="font-bold">70°</span>
        <span class="text-gray-500 ml-2">62°</span>
      </div>
    </div>
  </div>
</div>

<template>
  <!-- Weather Forecast -->
  <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-md">
    <h3 class="text-lg font-bold mb-4 text-center">5-Day Forecast</h3>
    <div class="space-y-3">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <span class="text-2xl mr-3">☀️</span>
          <span class="font-medium">Today</span>
        </div>
        <div class="text-right">
          <span class="font-bold">72°</span>
          <span class="text-gray-500 ml-2">65°</span>
        </div>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <span class="text-2xl mr-3">🌤️</span>
          <span class="font-medium">Tomorrow</span>
        </div>
        <div class="text-right">
          <span class="font-bold">75°</span>
          <span class="text-gray-500 ml-2">68°</span>
        </div>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <span class="text-2xl mr-3">☁️</span>
          <span class="font-medium">Wed</span>
        </div>
        <div class="text-right">
          <span class="font-bold">70°</span>
          <span class="text-gray-500 ml-2">62°</span>
        </div>
      </div>
    </div>
  </div>
</template>

export default function WeatherForecast() {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-md">
      <h3 className="text-lg font-bold mb-4 text-center">5-Day Forecast</h3>
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <span className="text-2xl mr-3">☀️</span>
            <span className="font-medium">Today</span>
          </div>
          <div className="text-right">
            <span className="font-bold">72°</span>
            <span className="text-gray-500 ml-2">65°</span>
          </div>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <span className="text-2xl mr-3">🌤️</span>
            <span className="font-medium">Tomorrow</span>
          </div>
          <div className="text-right">
            <span className="font-bold">75°</span>
            <span className="text-gray-500 ml-2">68°</span>
          </div>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <span className="text-2xl mr-3">☁️</span>
            <span className="font-medium">Wed</span>
          </div>
          <div className="text-right">
            <span className="font-bold">70°</span>
            <span className="text-gray-500 ml-2">62°</span>
          </div>
        </div>
      </div>
    </div>
  );
}

4. Weather with Temperature Chart

Weather component with a simple temperature visualization.

🌡️

Current: 72°F

Feels like 75°F

Min 65°F

Max 80°F

<!-- Weather with Temperature Chart -->
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-lg">
  <div class="text-center mb-4">
    <div class="text-4xl mb-2">🌡️</div>
    <div class="text-2xl font-bold">Current: 72°F</div>
    <div class="text-gray-600">Feels like 75°F</div>
  </div>
  <div class="space-y-2">
    <div class="flex justify-between text-sm">
      <span>Min</span>
      <span>65°F</span>
    </div>
    <div class="w-full bg-gray-200 rounded-full h-2">
      <div class="bg-orange-500 h-2 rounded-full" style="width: 70%"></div>
    </div>
    <div class="flex justify-between text-sm">
      <span>Max</span>
      <span>80°F</span>
    </div>
  </div>
</div>

<template>
  <!-- Weather with Temperature Chart -->
  <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-lg">
    <div class="text-center mb-4">
      <div class="text-4xl mb-2">🌡️</div>
      <div class="text-2xl font-bold">Current: 72°F</div>
      <div class="text-gray-600">Feels like 75°F</div>
    </div>
    <div class="space-y-2">
      <div class="flex justify-between text-sm">
        <span>Min</span>
        <span>65°F</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div class="bg-orange-500 h-2 rounded-full" style="width: 70%"></div>
      </div>
      <div class="flex justify-between text-sm">
        <span>Max</span>
        <span>80°F</span>
      </div>
    </div>
  </div>
</template>

export default function WeatherWithTemperatureChart() {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-lg">
      <div className="text-center mb-4">
        <div class="text-4xl mb-2">🌡️</div>
        <div className="text-2xl font-bold">Current: 72°F</div>
        <div className="text-gray-600">Feels like 75°F</div>
      </div>
      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Min</span>
          <span>65°F</span>
        </div>
        <div className="w-full bg-gray-200 rounded-full h-2">
          <div className="bg-orange-500 h-2 rounded-full" style="width: 70%"></div>
        </div>
        <div className="flex justify-between text-sm">
          <span>Max</span>
          <span>80°F</span>
        </div>
      </div>
    </div>
  );
}

5. Weather with Location

Weather component with location search and current conditions.

🌧️

64°F

Rainy

San Francisco, CA

<!-- Weather with Location -->
<div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-md">
  <div class="mb-4">
    <div class="relative">
      <input type="text" placeholder="Enter location..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
      <div class="absolute right-3 top-2.5">
        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
      </div>
    </div>
  </div>
  <div class="text-center">
    <div class="text-5xl mb-2">🌧️</div>
    <div class="text-3xl font-bold text-gray-900">64°F</div>
    <div class="text-gray-600">Rainy</div>
    <div class="text-sm text-gray-500 mt-2 flex items-center justify-center">
      <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
      </svg>
      San Francisco, CA
    </div>
  </div>
</div>

<template>
  <!-- Weather with Location -->
  <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-md">
    <div class="mb-4">
      <div class="relative">
        <input type="text" placeholder="Enter location..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
        <div class="absolute right-3 top-2.5">
          <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="text-center">
      <div class="text-5xl mb-2">🌧️</div>
      <div class="text-3xl font-bold text-gray-900">64°F</div>
      <div class="text-gray-600">Rainy</div>
      <div class="text-sm text-gray-500 mt-2 flex items-center justify-center">
        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
        </svg>
        San Francisco, CA
      </div>
    </div>
  </div>
</template>

export default function WeatherWithLocation() {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-6 shadow-sm max-w-md">
      <div className="mb-4">
        <div className="relative">
          <input
            type="text"
            placeholder="Enter location..."
            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
          <div className="absolute right-3 top-2.5">
            <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
          </div>
        </div>
      </div>
      <div className="text-center">
        <div className="text-5xl mb-2">🌧️</div>
        <div className="text-3xl font-bold text-gray-900">64°F</div>
        <div className="text-gray-600">Rainy</div>
        <div className="text-sm text-gray-500 mt-2 flex items-center justify-center">
          <svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
            <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd"/>
          </svg>
          San Francisco, CA
        </div>
      </div>
    </div>
  );
}