Arabic Weather Dashboard - Copy this Html, Tailwind Component to your project
Html: <!DOCTYPE html> <html lang="ar"> <head> <meta charset="UTF 8"> <title>الطقس في المغرب</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>الطقس الآن في الرباط</h1> <div class="weather card"> <div id="temp">جاري التحميل...</div> <div class="condition" id="condition"></div> </div> <script src="java.js"></script> </body> </html> css: /* البطاقة الرئيسية */ .weather card { background color: white; border radius: 20px; padding: 30px; width: 300px; box shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease in out; transform: scale(0.95); } /* التأثير عند مرور الفأرة */ .weather card:hover { transform: scale(1); box shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } /* النصوص العنوان */ h1 { font size: 2.5em; color: #004466; margin bottom: 20px; } /* درجة الحرارة */ .temp { font size: 48px; font weight: bold; color: #004466; } /* وصف الحالة */ .condition { font size: 18px; color: #555; margin top: 10px; } /* الأيقونة (صورة الطقس) */ .icon img { width: 80px; margin top: 20px; } /* الخلفية المتحركة */ @keyframes move background { 0% { background position: 0 0; } 100% { background position: 100% 100%; } } /* تعيين الخلفية المتحركة */ body { animation: move background 20s linear infinite; } I want a nice design for this website with a little animation.
