devsnips
Search docs, APIs, guides…

Component

Weather Card

Beautiful weather card with gradient sky, current conditions, forecast, and location info.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Gradient sky
  • Temperature display
  • Forecast grid
  • Weather icons
  • Location info

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/cards/weather-card/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Cards/weather-card
registry path: Tailwind/Components/Cards/weather-card

Source

Implementation

code.html 
<div class="relative bg-gradient-to-br from-sky-400 via-sky-500 to-blue-600 rounded-2xl p-6 text-white overflow-hidden">
  <div class="absolute top-0 right-0 w-48 h-48 bg-white/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div>
  <div class="absolute bottom-0 left-0 w-32 h-32 bg-blue-700/30 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2"></div>
  
  <div class="relative">
    <div class="flex items-center justify-between mb-6">
      <div>
        <p class="text-white/80 text-sm">San Francisco, CA</p>
        <p class="text-xs text-white/60">Monday, January 15</p>
      </div>
      <button class="p-2 hover:bg-white/10 rounded-full transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/>
        </svg>
      </button>
    </div>
    
    <div class="flex items-center justify-between mb-8">
      <div>
        <p class="text-7xl font-bold">72°</p>
        <p class="text-white/80 mt-1">Partly Cloudy</p>
        <p class="text-xs text-white/60 mt-1">H: 78° L: 65°</p>
      </div>
      <div class="text-right">
        <svg class="w-24 h-24 text-yellow-300" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69l-1.414 1.41m12.786-1.41 1.414 1.41M22 12h-2"/>
          <circle cx="12" cy="12" r="4"/>
        </svg>
      </div>
    </div>
    
    <div class="grid grid-cols-4 gap-3">
      <div class="bg-white/10 backdrop-blur rounded-xl p-3 text-center">
        <p class="text-xs text-white/60">Tue</p>
        <svg class="w-6 h-6 mx-auto my-2 text-white/80" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2v2m0 16v2M4 12H2m4.314-5.686L4.9 4.9m12.786 1.414L19.1 4.9M6.314 17.69l-1.414 1.41m12.786-1.41 1.414 1.41M22 12h-2"/>
          <circle cx="12" cy="12" r="4"/>
        </svg>
        <p class="text-sm font-semibold">76°</p>
      </div>
      <div class="bg-white/10 backdrop-blur rounded-xl p-3 text-center">
        <p class="text-xs text-white/60">Wed</p>
        <svg class="w-6 h-6 mx-auto my-2 text-white/80" fill="currentColor" viewBox="0 0 24 24">
          <path d="M3 15h18M3 19h18M3 11h18"/>
        </svg>
        <p class="text-sm font-semibold">68°</p>
      </div>
      <div class="bg-white/10 backdrop-blur rounded-xl p-3 text-center">
        <p class="text-xs text-white/60">Thu</p>
        <svg class="w-6 h-6 mx-auto my-2 text-white/80" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 16l-4-4 4-4m8 8l4-4-4-4M3 16l-1 4m18-20l-1 4"/>
        </svg>
        <p class="text-sm font-semibold">64°</p>
      </div>
      <div class="bg-white/10 backdrop-blur rounded-xl p-3 text-center">
        <p class="text-xs text-white/60">Fri</p>
        <svg class="w-6 h-6 mx-auto my-2 text-white/80" fill="currentColor" viewBox="0 0 24 24">
          <path d="M3 15h18M3 19h18M3 11h18"/>
        </svg>
        <p class="text-sm font-semibold">71°</p>
      </div>
    </div>
  </div>
</div>
64 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/cards/weather-card
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/cards/weather-card/

Install: npx devsnips add
Tailwind/Components/Cards/weather-card

This is the Weather Card — Beautiful weather card with gradient sky, current conditions, forecast, and location info.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/cards/weather-card