Home
yogourt
Weather card

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 CSS v3. It is responsive.

Card

Author yogourt

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

Responsive Article Section

Author:
Prashant

3 years ago

16.5k
myCard
card with image,title,body

Author:
farisubuntu

1 year ago

2.4k
content section

Author:
Crimson

1 year ago

953
Product Card

Author:
Maxim

9 months ago

1.6k
item - product card

Author:
ABDO-SY

10 months ago

896
Gradient card

Author:
TailwindFlex

2 years ago

9.4k
Info Card with image
An info card with an image, a short title, and a short description.

Author:
Arya

3 years ago

13.1k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.4k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

8 months ago

703
Service/Product card
Tour trip booking showcase card

Author:
JaxStone

2 years ago

13k
section card

Author:
Raul antonio de la cruz hernandez

1 week ago

91
Giftcard grid

Author:
ariaw

4 months ago

426

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components