Weather Widget with 5-Day Forecast

A clean, modern weather widget built with HTML, Tailwind CSS, and vanilla JavaScript. Perfect for integrating weather information into any web project.

Features:
- Current weather display with temperature, conditions, and "feels like" temperature
- 5-day forecast with daily highs and lows
- Temperature unit toggle (Celsius/Fahrenheit)
- Weather statistics including wind speed, humidity, and visibility
- Fully responsive design that works on all screen sizes
- Smooth hover animations and transitions
- Semantic HTML5 structure for better accessibility and SEO
- Schema.org structured data (JSON-LD) for rich snippets
- No dependencies except Tailwind CSS CDN
- Easy to customize with Tailwind utility classes

Technical Details:
- Markup: Semantic HTML5 with proper document structure
- Styling: Tailwind CSS v3.x via CDN (utility-first approach)
- JavaScript: Vanilla ES6+ (no frameworks or libraries required)
- Accessibility: WCAG 2.1 compliant with ARIA labels, semantic elements, and keyboard navigation support
- SEO Optimization:
- Structured data using JSON-LD (Schema.org WeatherForecast type)
- Open Graph and Twitter Card meta tags for social sharing
- Semantic heading hierarchy (h1, h2)
- Descriptive meta descriptions and keywords
- Performance: Lightweight (~8KB HTML), minimal JavaScript, CSS loaded from CDN
- Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge)
- Mobile-First: Responsive grid layout with breakpoints for mobile, tablet, and desktop
- **Customization:** Easily modify colors, layout, and data structure via Tailwind classes
- State Management: Simple boolean toggle for temperature units with dynamic DOM updates
- SVG Icons: Inline SVG graphics for weather conditions (scalable and customizable)

API Integration Ready:
The component uses mock data but is structured to easily integrate with weather APIs such as:
- OpenWeatherMap
- WeatherAPI
- Visual Crossing
- AccuWeather

Simply replace the data object with your API response and map the fields accordingly.

This tailwind example is contributed by Ijila Itunu, on 12-May-2026. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Toggle switch Widget

Author Ijila Itunu

Tailwind v3.4 793 1

Fork Fullscreen

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Current weather conditions and 5-day forecast for London, United Kingdom. Get accurate temperature, humidity, wind speed, and visibility information.">
    <meta name="keywords" content="London weather, UK weather forecast, current temperature London, weather conditions">
    <meta name="author" content="Weather Widget">
    
    
    <meta property="og:title" content="London Weather Forecast - Current Conditions & 5-Day Outlook">
    <meta property="og:description" content="Live weather updates for London, UK. Currently 16°C and partly cloudy.">
    <meta property="og:type" content="website">
    
    
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="London Weather Forecast">
    <meta name="twitter:description" content="Current weather and 5-day forecast for London, United Kingdom">
    
    <title>Weather Widget - HTML Component with 5-Day Forecast</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class'
        }
    </script>
    
    
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "London Weather Forecast",
      "description": "Current weather conditions and 5-day forecast for London, United Kingdom",
      "breadcrumb": {
        "@type": "BreadcrumbList",
        "itemListElement": [{
          "@type": "ListItem",
          "position": 1,
          "name": "Home",
          "item": "https://example.com"
        },{
          "@type": "ListItem",
          "position": 2,
          "name": "Weather",
          "item": "https://example.com/weather"
        },{
          "@type": "ListItem",
          "position": 3,
          "name": "London",
          "item": "https://example.com/weather/london"
        }]
      },
      "mainEntity": {
        "@type": "WeatherForecast",
        "address": {
          "@type": "PostalAddress",
          "addressLocality": "London",
          "addressCountry": "GB"
        },
        "potentialAction": {
          "@type": "ViewAction",
          "target": "https://example.com/weather/london"
        }
      }
    }
    </script>
</head>
<body class="bg-gradient-to-br from-blue-400 via-blue-500 to-blue-600 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center p-4 transition-colors duration-300">
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl overflow-hidden max-w-2xl w-full transition-colors duration-300">
        
        <div class="bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-700 dark:to-blue-900 p-6 text-white relative transition-colors duration-300">
            
            <button onclick="toggleTheme()" class="absolute top-4 right-4 bg-white/20 hover:bg-white/30 p-2 rounded-full transition" aria-label="Toggle theme">
                <svg id="sun-icon" class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M12 8a4 4 0 100 8 4 4 0 000-8z"></path>
                </svg>
                <svg id="moon-icon" class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                </svg>
            </button>
            
            <div class="flex justify-between items-start">
                <div>
                    <h1 class="text-3xl font-bold">London</h1>
                    <p class="text-blue-100 text-sm">United Kingdom</p>
                </div>
                <button onclick="toggleUnit()" class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-full text-sm font-medium transition">
                    °<span id="unit">C</span> / °<span id="alt-unit" class="opacity-60">F</span>
                </button>
            </div>

<div class="flex items-center justify-between mt-6">
                <div>
                    <div class="text-6xl font-bold" id="current-temp">16°</div>
                    <p class="text-xl mt-2">Partly Cloudy</p>
                    <p class="text-blue-100 text-sm">Feels like <span id="feels-like">14°</span></p>
                </div>
                <div class="text-blue-100">
                    <svg class="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
                    </svg>
                </div>
            </div>
        </div>

<div class="grid grid-cols-3 gap-4 p-6 bg-gray-50 dark:bg-gray-700 transition-colors duration-300">
            <div class="flex items-center space-x-3">
                <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-full transition-colors duration-300">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                    </svg>
                </div>
                <div>
                    <p class="text-gray-500 dark:text-gray-300 text-xs">Wind</p>
                    <p class="font-semibold dark:text-white">18 km/h</p>
                </div>
            </div>

<div class="flex items-center space-x-3">
                <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-full transition-colors duration-300">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"></path>
                    </svg>
                </div>
                <div>
                    <p class="text-gray-500 dark:text-gray-300 text-xs">Humidity</p>
                    <p class="font-semibold dark:text-white">72%</p>
                </div>
            </div>

<div class="flex items-center space-x-3">
                <div class="bg-blue-100 dark:bg-blue-900 p-3 rounded-full transition-colors duration-300">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
                <div>
                    <p class="text-gray-500 dark:text-gray-300 text-xs">Visibility</p>
                    <p class="font-semibold dark:text-white">10 km</p>
                </div>
            </div>
        </div>

<div class="p-6">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4 transition-colors duration-300">5-Day Forecast</h2>
            <div class="grid grid-cols-5 gap-3">
                
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-700 dark:to-gray-600 rounded-xl p-4 text-center hover:shadow-lg transition transform hover:-translate-y-1">
                    <p class="font-semibold text-gray-700 dark:text-gray-200 mb-2">Mon</p>
                    <svg class="w-10 h-10 mx-auto text-yellow-500 dark:text-yellow-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M12 8a4 4 0 100 8 4 4 0 000-8z"></path>
                    </svg>
                    <p class="text-sm"><span class="font-bold text-gray-800 dark:text-white" id="mon-high">18°</span> <span class="text-gray-500 dark:text-gray-400" id="mon-low">12°</span></p>
                </div>

<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 rounded-xl p-4 text-center hover:shadow-lg transition transform hover:-translate-y-1">
                    <p class="font-semibold text-gray-700 dark:text-gray-200 mb-2">Tue</p>
                    <svg class="w-10 h-10 mx-auto text-gray-500 dark:text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
                    </svg>
                    <p class="text-sm"><span class="font-bold text-gray-800 dark:text-white" id="tue-high">16°</span> <span class="text-gray-500 dark:text-gray-400" id="tue-low">11°</span></p>
                </div>

<div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-700 dark:to-gray-600 rounded-xl p-4 text-center hover:shadow-lg transition transform hover:-translate-y-1">
                    <p class="font-semibold text-gray-700 dark:text-gray-200 mb-2">Wed</p>
                    <svg class="w-10 h-10 mx-auto text-blue-500 dark:text-blue-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
                    </svg>
                    <p class="text-sm"><span class="font-bold text-gray-800 dark:text-white" id="wed-high">14°</span> <span class="text-gray-500 dark:text-gray-400" id="wed-low">9°</span></p>
                </div>

<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 rounded-xl p-4 text-center hover:shadow-lg transition transform hover:-translate-y-1">
                    <p class="font-semibold text-gray-700 dark:text-gray-200 mb-2">Thu</p>
                    <svg class="w-10 h-10 mx-auto text-gray-500 dark:text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
                    </svg>
                    <p class="text-sm"><span class="font-bold text-gray-800 dark:text-white" id="thu-high">15°</span> <span class="text-gray-500 dark:text-gray-400" id="thu-low">10°</span></p>
                </div>

<div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-700 dark:to-gray-600 rounded-xl p-4 text-center hover:shadow-lg transition transform hover:-translate-y-1">
                    <p class="font-semibold text-gray-700 dark:text-gray-200 mb-2">Fri</p>
                    <svg class="w-10 h-10 mx-auto text-yellow-500 dark:text-yellow-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M12 8a4 4 0 100 8 4 4 0 000-8z"></path>
                    </svg>
                    <p class="text-sm"><span class="font-bold text-gray-800 dark:text-white" id="fri-high">17°</span> <span class="text-gray-500 dark:text-gray-400" id="fri-low">11°</span></p>
                </div>
            </div>
        </div>
    </div>

// Check for saved theme preference or default to light mode
        const currentTheme = localStorage.getItem('theme') || 'light';
        if (currentTheme === 'dark') {
            document.documentElement.classList.add('dark');
        }

function toggleTheme() {
            document.documentElement.classList.toggle('dark');
            const isDark = document.documentElement.classList.contains('dark');
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
        }

const celsiusData = {
            current: 16,
            feelsLike: 14,
            forecast: {
                mon: { high: 18, low: 12 },
                tue: { high: 16, low: 11 },
                wed: { high: 14, low: 9 },
                thu: { high: 15, low: 10 },
                fri: { high: 17, low: 11 }
            }
        };

const fahrenheitData = {
            current: 61,
            feelsLike: 57,
            forecast: {
                mon: { high: 64, low: 54 },
                tue: { high: 61, low: 52 },
                wed: { high: 57, low: 48 },
                thu: { high: 59, low: 50 },
                fri: { high: 63, low: 52 }
            }
        };

function toggleUnit() {
            isCelsius = !isCelsius;
            const data = isCelsius ? celsiusData : fahrenheitData;
            const unit = isCelsius ? 'C' : 'F';
            const altUnit = isCelsius ? 'F' : 'C';

// Update unit display
            document.getElementById('unit').textContent = unit;
            document.getElementById('alt-unit').textContent = altUnit;

// Update temperatures
            document.getElementById('current-temp').textContent = data.current + '°';
            document.getElementById('feels-like').textContent = data.feelsLike + '°';

// Update forecast
            Object.keys(data.forecast).forEach(day => {
                document.getElementById(`${day}-high`).textContent = data.forecast[day].high + '°';
                document.getElementById(`${day}-low`).textContent = data.forecast[day].low + '°';
            });
        }
    </script>
</body>
</html>

Related Examples

3D Count downer

Hasan AlDoy (McDoy)

4 months ago

318
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Ameth Galarcio

2 years ago

3k
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.2k
Code card with copy Button
this example uses clipboard.js to copy the code

Joost Hietbrink

1 year ago

1.5k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Prashant

4 years ago

15.6k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Prajwal Hallale

3 years ago

22.2k
Periodic Table with Tailwind CSS

Michael Andreuzza

2 years ago

3k
Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

SHARIFUL ISLAM

1 year ago

2.4k
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Michael Andreuzza

2 years ago

3.1k
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Nick Girga

1 year ago

986
Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Komal Jain

2 years ago

2.7k