An Engaging and Interactive Weather Information Card Design Using Tailwind CSS

An Engaging and Interactive Weather Information Card Design Using Tailwind CSS Project by SudhuCodes Made with TailwindCSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

TailwindCSS — This project belongs to the tailwindcss category.

Upload Date

7/9/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- ------Code with SudhuCodes------ -->
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>SudhuCodes - An Engaging and Interactive Weather Information Card Design Using Tailwind CSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
11</head>
12
13<body class="flex items-center justify-center min-h-screen bg-[#212121]">
14
15    <div class="group flex cursor-pointer flex-col items-center p-2 w-[240px] bg-[#4141414f] rounded-lg border border-[#ffffff17] text-white text-center relative">
16        <div class="h-24 w-24 opacity-75 bg-[#3e91f0ab] -z-1 blur-xl absolute right-8 top-[25%] transition-transform duration-500 ease-in-out group-hover:translate-x-[-60px] group-hover:translate-y-[30px] group-hover:rotate-45"></div>
17        <div class="z-10 flex items-center flex-col">
18            <p class="font-semibold text-xl pt-3">DELHI</p>
19            <p class="text-xs text-zinc-400 font-medium pt-2">PARTIALY CLOUDY</p>
20            <div class="flex justify-center p-3">
21                <img src="./images/cloudy.webp" alt="cloudy" class="h-14">
22            </div>
23            <p class="font-medium text-3xl">32°<span class="text-lg pl-1">c</span></p>
24            <div class="flex items-center justify-between w-20 py-4">
25                <p class="grid text-zinc-200 text-sm font-medium">Min<span class="text-zinc-400 text-xs">29°</span></p>
26                <div class="bg-white h-8 w-[2px]"></div>
27                <p class="grid text-zinc-200 text-sm font-medium">Max<span class="text-zinc-400 text-xs">34°</span></p>
28            </div>
29        </div>
30    </div>
31
32</body>
33
34</html>

Live Preview

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.