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.1k 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

Product review card

Moriba Traore

3 years ago

15.8k
Elevated feature card

magersa

2 years ago

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

Akram Khan

2 years ago

3.3k
Professional Plan
Professional Plan

Muzammil Riaz

1 year ago

696
Issue card
card designed to display the details of a technical issue

ABDO-SY

1 year ago

2.7k
Profile Card
Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

UI-Templates

11 months ago

1.5k
Pagination
It's my first project which i made him in the using tailwind css and html

Sufyan jutt

10 months ago

821
Targeta
Targeta

Raul antonio de la cruz hernandez

10 months ago

860
Card kpi Chart
Targetas kpi con graficas

Raul antonio de la cruz hernandez

10 months ago

1.4k
new Save Component tailwindflex
new Save Component tailwindflex

Omer fils ELENGA

3 months ago

357
carde Iptplus
Iptplus carde

Omer fils ELENGA

9 months ago

429
Chats Message Screen in neomorphism
light/dark chat screen

Akram Khan

2 years ago

2.9k