→ Anonymous
→ Weather Forecast Display Card

Weather Forecast Display Card

This Example is contributed by Anonymous, on 31-Mar-2025. It is responsive.

Gradient Background Weather Card Dashboard Widget Forecast Display

<div class="weather-card">
  <div class="card-header">
    <div class="location">
      <h2>San Francisco</h2>
      <p>California, USA</p>
    </div>
    <div class="date">
      <p>Monday, 24 July</p>
    </div>
  </div>
  
  <div class="weather-info">
    <div class="temp-display">
      <div class="temp">
        <span class="value">23</span>
        <span class="unit">°C</span>
      </div>
      <div class="condition">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="weather-icon">
          <circle cx="12" cy="12" r="5"></circle>
          <line x1="12" y1="1" x2="12" y2="3"></line>
          <line x1="12" y1="21" x2="12" y2="23"></line>
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
          <line x1="1" y1="12" x2="3" y2="12"></line>
          <line x1="21" y1="12" x2="23" y2="12"></line>
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
        </svg>
        <p>Sunny</p>
      </div>
    </div>
    
    <div class="weather-details">
      <div class="detail">
        <span class="label">Humidity</span>
        <span class="value">48%</span>
      </div>
      <div class="detail">
        <span class="label">Wind</span>
        <span class="value">15 km/h</span>
      </div>
      <div class="detail">
        <span class="label">Feels like</span>
        <span class="value">25°C</span>
      </div>
    </div>
  </div>
  
  <div class="forecast">
    <div class="forecast-day">
      <span class="day">Tue</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="forecast-icon">
        <path d="M17 18a5 5 0 0 0-10 0"></path>
        <line x1="12" y1="9" x2="12" y2="2"></line>
        <line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line>
        <line x1="1" y1="18" x2="3" y2="18"></line>
        <line x1="21" y1="18" x2="23" y2="18"></line>
        <line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line>
        <line x1="23" y1="22" x2="1" y2="22"></line>
        <polyline points="8 6 12 2 16 6"></polyline>
      </svg>
      <span class="temp">21°</span>
    </div>
    <div class="forecast-day">
      <span class="day">Wed</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="forecast-icon">
        <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
      </svg>
      <span class="temp">19°</span>
    </div>
    <div class="forecast-day">
      <span class="day">Thu</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="forecast-icon">
        <circle cx="12" cy="12" r="5"></circle>
        <line x1="12" y1="1" x2="12" y2="3"></line>
        <line x1="12" y1="21" x2="12" y2="23"></line>
        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
        <line x1="1" y1="12" x2="3" y2="12"></line>
        <line x1="21" y1="12" x2="23" y2="12"></line>
        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
      </svg>
      <span class="temp">24°</span>
    </div>
    <div class="forecast-day">
      <span class="day">Fri</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="forecast-icon">
        <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
      </svg>
      <span class="temp">20°</span>
    </div>
    <div class="forecast-day">
      <span class="day">Sat</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="forecast-icon">
        <line x1="8" y1="19" x2="16" y2="19"></line>
        <line x1="8" y1="13" x2="16" y2="13"></line>
        <line x1="8" y1="9" x2="16" y2="9"></line>
        <line x1="8" y1="5" x2="16" y2="5"></line>
        <line x1="12" y1="21" x2="12" y2="3"></line>
        <path d="M20 16.58A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25"></path>
      </svg>
      <span class="temp">18°</span>
    </div>
  </div>
</div>

Related Examples

Elegant Dark Mode Blog Card Component

Author:
Jorrit

6 months ago
Profile Card
A beautifully designed profile card featuring smooth gradient animations and social media integration for modern web applications

Author:
Emma Thompson

7 months ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

7 months ago
Flexible Info Cards with Stats Display
A set of clean information cards displaying key metrics and statistics with a simple hover effect for enhanced user experience.

Author:
Marcus Thornton

5 months ago
CTA Card
Stunning gradient service cards with smooth hover animations and interactive elements, perfect for showcasing features or services.

Author:
Prajwal Hallale

7 months ago
Floating Social Media Profile Card
A beautifully designed profile card featuring smooth gradient backgrounds, hover animations, and social media integration

Author:
Emma Thompson

7 months ago
Vibrant Neon Gradient Profile Card
Stunning neon gradient card with glowing edges and a sleek information section, perfect for showcasing user profiles or product details with a futuristic cyberpunk aesthetic.

Author:
Alexis Rivera

6 months ago
Glassmorphism Dashboard Card Component

Author:
Prajwal Hallale

6 months ago
Dashboard Statistics Cards
Responsive statistics cards with vibrant color schemes designed to highlight key performance indicators for data-driven applications.

Author:
Jordan McKenzie

6 months ago
Data Card with Hover Effects
Engaging KPI card that displays key metrics with interactive hover effects and a progress bar.

Author:
Laura Mitchell

6 months ago
Gradient Background Statistics Display Section
A statistics display section with a dark gradient background that adapts to your website's color theme. Perfect for showcasing key metrics and data points with visual impact.

Author:
Anonymous

5 months ago
Product Card with Hover Effects
Premium product display component with elegant typography, animated details, and seamless add-to-cart functionality.

Author:
Prajwal Hallale

7 months ago

Didn't find component you were looking for?

Search from 500+ components