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

160

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

Card animate

Author:
Raul antonio de la cruz hernandez

1 year ago

1.3k
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

2 years ago

12.3k
CTA Call To Action
CTA stands for "Call to Action." It is a marketing term that refers to prompts that encourage users to take a specific action. CTAs are typically found in websites, advertisements, emails, and various marketing materials. The goal of a CTA is to guide users toward a desired action that supports business objectives, such as: 1. Encouraging Engagement: A CTA may prompt users to sign up for a newsletter, follow on social media, or download a resource. 2. Driving Conversion: It can lead users to make a purchase, book a service, or start a free trial. 3. Generating Leads: A CTA might encourage users to fill out a form, requesting more information or a consultation.

Author:
KULDEEP

7 months ago

766
File Upload

Author:
Rajesh Maheshwari

11 months ago

1k
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

1 year ago

1.7k
Info card

Author:
Laurits

3 years ago

10.8k
Card template

Author:
Raul antonio de la cruz hernandez

4 weeks ago

33
Tailwind card

Author:
Conan Hilton

3 years ago

13.6k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

9 months ago

961
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.8k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

2 months ago

514
Info cards

Author:
Samuel Dawson

3 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components