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

175

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 card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

6.6k
Card for user contact

Author:
achelton pambo

1 year ago

2.7k
Ribbon at Corner

Author:
Mohit Prajapati

3 years ago

18.8k
Responsive Features Section

Author:
ariaw

10 months ago

959
Image card

Author:
Laurits

3 years ago

17.5k
Products Layout
An ecommerce store front product list layout

Author:
Developer Kwame

5 months ago

525
Tailwind Flex Component: Responsive Testimonial Section UI
A clean, modern, and fully responsive Testimonial Section built using Tailwind CSS and Flexbox. Ideal for portfolios, agency websites, SaaS landing pages, or any modern UI project. This reusable component includes user images, job titles, and quotes—perfect for showcasing feedback and adding trust to your UI.

Author:
Muhammad Umair Arshad

9 months ago

1.1k
Features grid

Author:
Sophia Baker

3 years ago

10.2k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

1 year ago

1.3k
3D Modern Pricing Card
Here's a modern, reusable Pricing Card component that's highly popular on platforms like TailwindFlex. It's clean, responsive, and designed for conversions.

Author:
dev-fab250

9 months ago

804
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Author:
Nick Girga

10 months ago

831
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components