Weather card

Component was one shot generated using https://inspi.me

This tailwind example is contributed by yogourt, on 13-Jan-2026. Component is made with Tailwind v3.4. It is responsive.

Card

Author yogourt

Tailwind v3.4 1.2k 2

Fork Fullscreen

<div class="riso-card-container">
  <div class="riso-overlay-layer">
  </div>
  <div class="riso-content">
    <div class="riso-header">
      <span class="riso-loc">REYKJAVÍK</span>
      <span class="riso-mono">64.1265° N</span>
    </div>
    <div class="riso-temp-stack">
      <h1 class="riso-main-temp">08°</h1>
      <div class="riso-layer riso-layer-cyan">08°</div>
      <div class="riso-layer riso-layer-magenta">08°</div>
    </div>
    <div class="riso-footer">
      <div class="riso-condition">
        <div class="riso-icon-sun">
        </div>
        <span class="riso-mono-bold">PARTIAL OVERCAST</span>
      </div>
      <div class="riso-stats">
        <div class="stat-item">
          <span class="label">HUMIDITY</span>
          <span class="val">42%</span>
        </div>
        <div class="stat-item">
          <span class="label">WIND</span>
          <span class="val">12 KM/H</span>
        </div>
      </div>
    </div>
  </div>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
      --bg-paper: #f4f1ea;
      --ink-cyan: rgba(0, 163, 224, 0.6);
      --ink-magenta: rgba(230, 0, 126, 0.5);
      --ink-black: #2d2d2d;
    }
    body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
    .riso-card-container {
      width: 340px;
      height: 480px;
      background: var(--bg-paper);
      position: relative;
      padding: 40px;
      border-radius: 2px;
      box-shadow: 20px 20px 0px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: crosshair;
      font-family: 'Inter', sans-serif;
    }

.riso-card-container:hover {
      transform: translate(-4px, -4px);
    }

.riso-overlay-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      mix-blend-mode: multiply;
      opacity: 0.15;
      z-index: 10;
      background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="f"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23f)"/%3E%3C/svg%3E');
    }

.riso-content {
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

.riso-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-bottom: 2px solid var(--ink-black);
      padding-bottom: 15px;
    }

.riso-loc {
      font-weight: 900;
      font-size: 14px;
      letter-spacing: 0.2em;
      color: var(--ink-black);
    }

.riso-mono {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px;
      color: var(--ink-magenta);
      mix-blend-mode: multiply;
    }

.riso-temp-stack {
      position: relative;
      margin: 60px 0;
    }

.riso-main-temp {
      font-size: 140px;
      line-height: 0.8;
      margin: 0;
      color: var(--ink-black);
      position: relative;
      z-index: 3;
      letter-spacing: -0.05em;
    }

.riso-layer {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 140px;
      line-height: 0.8;
      font-weight: 900;
      pointer-events: none;
      mix-blend-mode: multiply;
      transition: transform 0.3s ease;
    }

.riso-layer-cyan {
      color: var(--ink-cyan);
      transform: translate(4px, 2px);
    }

.riso-layer-magenta {
      color: var(--ink-magenta);
      transform: translate(-3px, -1px);
    }

.riso-card-container:hover .riso-layer-cyan {
      transform: translate(12px, 8px);
    }

.riso-card-container:hover .riso-layer-magenta {
      transform: translate(-8px, -4px);
    }

.riso-footer {
      border-top: 2px solid var(--ink-black);
      padding-top: 15px;
    }

.riso-condition {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

.riso-icon-sun {
      width: 24px;
      height: 24px;
      border: 2px solid var(--ink-cyan);
      border-radius: 50%;
      position: relative;
      mix-blend-mode: multiply;
    }

.riso-mono-bold {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 12px;
      color: var(--ink-black);
    }

.riso-stats {
      display: flex;
      justify-content: space-between;
    }

.stat-item {
      display: flex;
      flex-direction: column;
    }

.label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 8px;
      color: var(--ink-magenta);
      margin-bottom: 4px;
    }

.val {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 14px;
      color: var(--ink-black);
    }
  </style>
</div>

Related Examples

Coming Soon Section
Simple and beautiful card for your showing on your projects (in development) home screen

Noob

4 years ago

11.6k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.2k
Product Details Card

ABDO-SY

1 year ago

3k
Article Card

Anonymous

2 years ago

3.3k
Signup And Signin page
Signup And Signin page with tab controller

Akram Khan

2 years ago

3.5k
Info Card

Prem..

4 years ago

20.9k
Holiday package card
Responsive card

Aman kumar

2 years ago

7.2k
Card
Card

Aman kumar

2 years ago

3k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

kzsamir849

2 years ago

2.7k
Simple Profile Card.
Profile page with basic informations

Sedat Kumcu

2 years ago

3.6k
Brand Grid with Hover Effect

ariaw

1 year ago

2.1k
Card with link
This example can be used to show a CTA as a link instead of a button inside the card.

Md. Tofayel islam

2 years ago

3.2k