Skip to content

Weather Forecast with Weekly View

Tailwind CSS weather widget with current conditions, a selectable 7-day forecast with temperature range bars, and a °C/°F switch.

Also known as: weekly weather forecast, 7 day weather widget, weather forecast card, temperature range forecast

Tailwind CSS Weather Widgets Responsive #card #forecast #responsive #weather #widget

Weather Forecast with Weekly View live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

A weather widget built with Tailwind CSS that pairs a gradient panel of current conditions with a 7-day forecast list. Each day shows an icon, rain chance and a temperature range bar scaled to the whole week; selecting a day loads its details into the main panel, and a °C/°F switch converts every value. It fits travel sites, dashboards, event pages and smart-home apps.

How it works

The root is .twf-forecast. A hidden SVG sprite at the top defines the icons (twf-i-sun, twf-i-partly, twf-i-cloud, twf-i-rain, twf-i-storm), which are reused with <use href>. The left panel holds the location, the unit switch (data-twf-unit), the large temperature, condition text and a dl of four detail tiles. The right panel is a list of button.twf-day elements; each carries its data in attributes: data-twf-day, data-twf-icon, data-twf-cond, data-twf-hi, data-twf-lo, data-twf-rain, data-twf-hum, data-twf-wind and data-twf-uv.

On DOMContentLoaded the script initializes every .twf-forecast. It finds the lowest low and highest high of the week and positions each .twf-range bar with left and right percentages, so the bars are directly comparable. Clicking a day sets aria-pressed, updates the main panel, swaps the main icon href and sets data-twf-kind so style.css can tint it. The first day shows the current temperature from data-twf-now; later days show their high. Every temperature is stored in Celsius in data-twf-temp and rendered in the chosen unit; wind switches between km/h and mph. Without JavaScript the full forecast and today's details remain readable.

Customization

  • data-twf-hi, data-twf-lo, data-twf-cond, data-twf-icon and the other data-twf-* values on each .twf-day: fill the list from your weather API (Celsius and km/h).
  • data-twf-now on the large temperature: set the current reading shown when the first day is selected.
  • from-sky-500 via-sky-600 to-indigo-700 on the left panel: change the gradient, e.g. to from-orange-400 to-rose-600 for a warm theme.
  • from-sky-400 via-amber-300 to-orange-400 on .twf-range: recolor the temperature bars.
  • .twf-main-icon[data-twf-kind="rain"] in style.css: adjust the main icon tint per condition.
  • uvLabel() in script.js: change the UV index wording or thresholds.
  • lg:grid-cols-[1fr_1.15fr] on the section: change the panel proportions, or remove it to keep the stacked mobile layout.

Use cases

  • Travel sites: visitors choose a day from a seven-day list to see its conditions and details
  • Event pages: rain chance and temperature range bars help plan outdoor activities
  • Smart-home apps: current conditions sit beside humidity, wind and UV tiles
  • Dashboards: a switch converts every temperature and wind speed between metric and imperial units

Accessibility

Day buttons use aria-pressed to expose the selected day, and visually hidden text adds "Rain", "Low", "High" and the condition to each button's name. Arrow keys, Home and End move between days. A visually hidden role="status" region announces the selected day's summary. The unit switch is a labelled role="group" with aria-pressed buttons, all icons are aria-hidden, details use a dl with dt/dd pairs, and focus rings are visible. Transitions respect prefers-reduced-motion.

Usage notes

The unit choice is stored with localStorage in a try/catch, so the widget works where storage is blocked. If several widgets share a page, keep one copy of the icon sprite and give each heading a unique id.

Weather Forecast with Weekly View at a glance

Framework
Tailwind CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Tailwind CSS
Layout
Responsive, works on mobile
Category
Weather Widgets
License
Free for personal and commercial use

Questions about this template

Can I use the Weather Forecast with Weekly View code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Tailwind CSS from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

  • <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.

Weather Forecast with Weekly View – Tailwind CSS weather widgets component screenshot
Weather Forecast with Weekly View · Tailwind CSS Weather Widgets

More Weather Widgets

Weather Card with Forecast – Pure CSS weather widgets preview

Weather Card with Forecast

Sky-blue weather card with a CSS-drawn sun and clouds, current conditions, quick stats, a 5-day forecast with range bars and a Celsius/Fahrenheit switch.

Pure CSS Weather Widgets