واجهات متجاوبة بـ Tailwind

const courses = ['أطر الويب', 'أمن الويب', 'علم البيانات', 'ضمان الجودة', 'الأجهزة الذكية', 'تحليل البرمجيات']; export default function App() {  return (    <div className="p-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">      {courses.map(c => (        <div key={c} className="p-4 rounded-xl bg-sky-50 border border-sky-200 font-semibold text-sky-900">{c}</div>      ))}    </div>  );}

export default function App() {  return (    <div className="p-3 space-y-3">      <div className="flex flex-col md:flex-row gap-3">        <aside className="md:w-48 p-3 rounded-lg bg-slate-100">القائمة الجانبية</aside>        <main className="flex-1 p-3 rounded-lg bg-white border">المحتوى الرئيسي</main>      </div>      <p className="block md:hidden text-rose-700">📱 أنت على شاشة صغيرة</p>      <p className="hidden md:block text-emerald-700">🖥 أنت على شاشة كبيرة</p>      <h1 className="text-xl md:text-3xl font-bold">عنوان يكبر مع الشاشة</h1>    </div>  );}

import { useState } from 'react'; const links = ['الرئيسية', 'الدورات', 'الجدول', 'تواصل']; export default function App() {  const [open, setOpen] = useState(false);  return (    <nav className="bg-sky-700 text-white rounded-xl p-3">      <div className="flex items-center justify-between">        <b>🎓 الكلية التقنية</b>        <button className="md:hidden text-2xl" onClick={() => setOpen(!open)} aria-label="القائمة">          {open ? '✕' : '☰'}        </button>        <ul className="hidden md:flex gap-4">          {links.map(l => <li key={l}><a href="#" className="hover:underline">{l}</a></li>)}        </ul>      </div>      {open && (        <ul className="md:hidden mt-3 space-y-2">          {links.map(l => <li key={l}><a href="#" className="block p-2 rounded bg-sky-800">{l}</a></li>)}        </ul>      )}    </nav>  );}