English 中文 العربية 日本語 Português

Tailwind CSS: تجربة عملية

1. متطلبات المشروع

قم بإنشاء لوحة تحكم إدارية مرتبة تتضمن شريط تنقل جانبي، وبطاقات إحصائية في الجزء العلوي، وجداول بيانات، وأقسام نماذج، وعناصر احتياطية للرسوم البيانية، مع دعم الوضع الداكن والتوافق مع أجهزة سطح المكتب والهواتف المحمولة.

2. المتطلبات الفنية

3. التنفيذ خطوة بخطوة

▶ مثال: الخطوة 1 - شريط التنقل الجانبي

شريط جانبي أيسر ثابت يحتوي على الشعار وعناصر القائمة وصورة المستخدم؛ قابل للطي على الأجهزة المحمولة.

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Panel - Sidebar Navigation</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' }
          }
        }
      }
    }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100">

  <!-- Mobile top bar -->
  <div class="lg:hidden fixed top-0 w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-40 px-4 py-3 flex items-center justify-between">
    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
    <span class="font-bold">Admin Panel</span>
    <div class="w-10"></div>
  </div>

  <!-- Overlay -->
  <div id="overlay" class="hidden fixed inset-0 bg-black/50 z-40 lg:hidden"></div>

  <!-- Sidebar -->
  <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transform -translate-x-full lg:translate-x-0 transition-transform">
    <div class="flex flex-col h-full">
      <!-- Logo -->
      <div class="h-16 flex items-center gap-3 px-6 border-b border-gray-200 dark:border-gray-800">
        <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
          <span class="text-white font-bold text-sm">A</span>
        </div>
        <span class="text-lg font-bold">AdminKit</span>
      </div>

      <!-- Menu -->
      <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 bg-primary-50 dark:bg-primary-700/20 text-primary-600 dark:text-primary-400 rounded-lg">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
          <span>Dashboard</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
          <span>Analytics</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
          <span>Users</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
          <span>Products</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
          <span>Orders</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          <span>Settings</span>
        </a>
      </nav>

      <!-- User avatar -->
      <div class="p-4 border-t border-gray-200 dark:border-gray-800">
        <div class="flex items-center gap-3 px-3 py-2">
          <div class="w-9 h-9 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
            <span class="text-primary-600 dark:text-primary-400 font-semibold text-sm">A</span>
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium truncate">Alex Chen</p>
            <p class="text-xs text-gray-500 truncate">admin@example.com</p>
          </div>
          <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
          </button>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main content placeholder -->
  <main class="lg:ml-64 pt-16 lg:pt-0 min-h-screen p-6">
    <p class="text-gray-500">Main content area</p>
  </main>

  <script>
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const toggle = document.getElementById('sidebarToggle');
    toggle?.addEventListener('click', () => {
      sidebar.classList.toggle('-translate-x-full');
      overlay.classList.toggle('hidden');
    });
    overlay?.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      overlay.classList.add('hidden');
    });
  </script>

</body>
</html>
99 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: الخطوة 2 - بطاقات الإحصائيات

4 بطاقات إحصائية رئيسية تعرض المؤشرات الأساسية.

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stat Cards</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    <!-- Total Users -->
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
      <div class="flex items-center justify-between mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">Total Users</span>
        <div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
        </div>
      </div>
      <p class="text-3xl font-bold mb-1">24,589</p>
      <div class="flex items-center gap-1 text-sm">
        <span class="text-green-600 dark:text-green-400 flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
          12.5%
        </span>
        <span class="text-gray-500">vs last month</span>
      </div>
    </div>

    <!-- Total Revenue -->
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
      <div class="flex items-center justify-between mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">Total Revenue</span>
        <div class="w-10 h-10 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
      </div>
      <p class="text-3xl font-bold mb-1">$892,400</p>
      <div class="flex items-center gap-1 text-sm">
        <span class="text-green-600 dark:text-green-400 flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
          8.2%
        </span>
        <span class="text-gray-500">vs last month</span>
      </div>
    </div>

    <!-- Orders -->
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
      <div class="flex items-center justify-between mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">Orders</span>
        <div class="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
        </div>
      </div>
      <p class="text-3xl font-bold mb-1">3,847</p>
      <div class="flex items-center gap-1 text-sm">
        <span class="text-red-600 dark:text-red-400 flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
          3.1%
        </span>
        <span class="text-gray-500">vs last month</span>
      </div>
    </div>

    <!-- Conversion Rate -->
    <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
      <div class="flex items-center justify-between mb-4">
        <span class="text-sm text-gray-500 dark:text-gray-400">Conversion Rate</span>
        <div class="w-10 h-10 bg-orange-50 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
        </div>
      </div>
      <p class="text-3xl font-bold mb-1">5.6%</p>
      <div class="flex items-center gap-1 text-sm">
        <span class="text-green-600 dark:text-green-400 flex items-center gap-1">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
          2.4%
        </span>
        <span class="text-gray-500">vs last month</span>
      </div>
    </div>
  </div>

</body>
</html>
80 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: الخطوة 3 - جدول البيانات

جدول بيانات متجاوب قابل للتمرير مع نمط خطوط متناوبة وأزرار إجراءات.

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Table</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">

  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
    <!-- Table header toolbar -->
    <div class="p-4 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
      <h3 class="text-lg font-semibold">Recent Orders</h3>
      <div class="flex items-center gap-3 w-full sm:w-auto">
        <div class="relative flex-1 sm:flex-none">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
          <input type="text" placeholder="Search orders..." class="w-full sm:w-64 pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
        </div>
        <button class="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors flex-shrink-0">
          Export
        </button>
      </div>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
      <table class="w-full min-w-[640px]">
        <thead>
          <tr class="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
            <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
            <th class="text-right px-4 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7891</td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center text-xs font-semibold text-blue-600">J</div>
                <span class="text-sm">John Doe</span>
              </div>
            </td>
            <td class="px-4 py-3 text-sm">Pro Annual</td>
            <td class="px-4 py-3 text-sm font-medium">$1,188</td>
            <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">Completed</span></td>
            <td class="px-4 py-3 text-sm text-gray-500">2025-01-15</td>
            <td class="px-4 py-3 text-right">
              <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
              </button>
            </td>
          </tr>
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7892</td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center text-xs font-semibold text-green-600">L</div>
                <span class="text-sm">Lisa Wang</span>
              </div>
            </td>
            <td class="px-4 py-3 text-sm">Enterprise Annual</td>
            <td class="px-4 py-3 text-sm font-medium">$3,588</td>
            <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">Processing</span></td>
            <td class="px-4 py-3 text-sm text-gray-500">2025-01-14</td>
            <td class="px-4 py-3 text-right">
              <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
              </button>
            </td>
          </tr>
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7893</td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center text-xs font-semibold text-purple-600">M</div>
                <span class="text-sm">Mike Zhang</span>
              </div>
            </td>
            <td class="px-4 py-3 text-sm">Pro Monthly</td>
            <td class="px-4 py-3 text-sm font-medium">$99</td>
            <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">Completed</span></td>
            <td class="px-4 py-3 text-sm text-gray-500">2025-01-13</td>
            <td class="px-4 py-3 text-right">
              <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
              </button>
            </td>
          </tr>
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
            <td class="px-4 py-3 text-sm font-mono text-blue-600 dark:text-blue-400">#ORD-7894</td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center text-xs font-semibold text-orange-600">S</div>
                <span class="text-sm">Sarah Zhao</span>
              </div>
            </td>
            <td class="px-4 py-3 text-sm">Free Upgrade</td>
            <td class="px-4 py-3 text-sm font-medium">$0</td>
            <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full">Cancelled</span></td>
            <td class="px-4 py-3 text-sm text-gray-500">2025-01-12</td>
            <td class="px-4 py-3 text-right">
              <button class="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
      <p class="text-sm text-gray-500">Showing 1-4 of 256 results</p>
      <div class="flex items-center gap-1">
        <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50" disabled>Previous</button>
        <button class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg">1</button>
        <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">2</button>
        <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">3</button>
        <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">Next</button>
      </div>
    </div>
  </div>

</body>
</html>
127 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: الخطوة 4 - قسم النموذج

نموذج يحتوي على حقول إدخال وقوائم منسدلة ومساحات نصية وأزرار.

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Section</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">

  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 max-w-2xl">
    <h3 class="text-lg font-semibold mb-6">Add New User</h3>

    <form class="space-y-5">
      <!-- Name row -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label class="block text-sm font-medium mb-1.5">First Name</label>
          <input type="text" placeholder="Enter first name"
                 class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
        </div>
        <div>
          <label class="block text-sm font-medium mb-1.5">Last Name</label>
          <input type="text" placeholder="Enter last name"
                 class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
        </div>
      </div>

      <!-- Email -->
      <div>
        <label class="block text-sm font-medium mb-1.5">Email Address</label>
        <input type="email" placeholder="user@example.com"
               class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all">
      </div>

      <!-- Role and Status -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
        <div>
          <label class="block text-sm font-medium mb-1.5">Role</label>
          <select class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all appearance-none cursor-pointer">
            <option value="">Select a role</option>
            <option value="admin">Admin</option>
            <option value="editor">Editor</option>
            <option value="viewer">Viewer</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-medium mb-1.5">Status</label>
          <select class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all appearance-none cursor-pointer">
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select>
        </div>
      </div>

      <!-- Notes -->
      <div>
        <label class="block text-sm font-medium mb-1.5">Notes</label>
        <textarea rows="3" placeholder="Optional notes..."
                  class="w-full px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition-all resize-none"></textarea>
      </div>

      <!-- Notification toggle -->
      <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
        <div>
          <p class="text-sm font-medium">Send Welcome Email</p>
          <p class="text-xs text-gray-500">Automatically send login credentials upon user creation</p>
        </div>
        <label class="relative inline-flex items-center cursor-pointer">
          <input type="checkbox" class="sr-only peer" checked>
          <div class="w-11 h-6 bg-gray-300 dark:bg-gray-600 rounded-full peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full"></div>
        </label>
      </div>

      <!-- Buttons -->
      <div class="flex items-center gap-3 pt-2">
        <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors">
          Create User
        </button>
        <button type="button" class="px-6 py-2.5 border border-gray-200 dark:border-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
          Cancel
        </button>
      </div>
    </form>
  </div>

</body>
</html>
77 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: الخطوة 5 - قسم العنصر النائب للرسم البياني

مساحات مؤقتة مخصصة لمكتبة الرسوم البيانية الفعلية.

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chart Placeholders</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = { darkMode: 'class' }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100 p-6">

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Revenue Trend Chart -->
    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-lg font-semibold">Revenue Trend</h3>
        <select class="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-xs focus:outline-none">
          <option>Last 7 Days</option>
          <option>Last 30 Days</option>
          <option>Last 90 Days</option>
        </select>
      </div>
      <div class="h-64 flex items-end gap-2 px-2">
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-200 dark:bg-blue-900 rounded-t" style="height: 45%"></div>
          <span class="text-xs text-gray-500">Mon</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height: 65%"></div>
          <span class="text-xs text-gray-500">Tue</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height: 50%"></div>
          <span class="text-xs text-gray-500">Wed</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-500 dark:bg-blue-600 rounded-t" style="height: 80%"></div>
          <span class="text-xs text-gray-500">Thu</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-600 dark:bg-blue-500 rounded-t" style="height: 70%"></div>
          <span class="text-xs text-gray-500">Fri</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height: 90%"></div>
          <span class="text-xs text-gray-500">Sat</span>
        </div>
        <div class="flex-1 flex flex-col items-center gap-1">
          <div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height: 60%"></div>
          <span class="text-xs text-gray-500">Sun</span>
        </div>
      </div>
    </div>

    <!-- User Source Donut Chart Placeholder -->
    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
      <h3 class="text-lg font-semibold mb-6">Traffic Sources</h3>
      <div class="flex flex-col items-center justify-center">
        <div class="relative w-48 h-48">
          <!-- Simple donut chart -->
          <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#e5e7eb" stroke-width="3" class="dark:stroke-gray-700"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="0"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="25 75" stroke-dashoffset="-40"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="-65"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="-85"/>
          </svg>
          <div class="absolute inset-0 flex flex-col items-center justify-center">
            <span class="text-2xl font-bold">100%</span>
            <span class="text-xs text-gray-500">Total</span>
          </div>
        </div>
        <div class="mt-6 grid grid-cols-2 gap-x-8 gap-y-2">
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
            <span class="text-sm">Search <span class="text-gray-500">40%</span></span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-green-500 rounded-full"></div>
            <span class="text-sm">Direct <span class="text-gray-500">25%</span></span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
            <span class="text-sm">Social <span class="text-gray-500">20%</span></span>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-3 h-3 bg-red-500 rounded-full"></div>
            <span class="text-sm">Other <span class="text-gray-500">15%</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
92 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

▶ مثال: لوحة تحكم إدارية كاملة

دمج جميع الأقسام في لوحة تحكم إدارية شاملة:

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AdminKit - Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: { 50: '#eff6ff', 100: '#dbeafe', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8' }
          }
        }
      }
    }
  </script>
</head>
<body class="bg-gray-100 dark:bg-gray-950 text-gray-900 dark:text-gray-100">

  <!-- Mobile top bar -->
  <div class="lg:hidden fixed top-0 w-full bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 z-40 px-4 py-3 flex items-center justify-between">
    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
    </button>
    <span class="font-bold">AdminKit</span>
    <button id="themeToggleMobile" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
      <span class="dark:hidden">🌙</span>
      <span class="hidden dark:inline">☀️</span>
    </button>
  </div>

  <!-- Overlay -->
  <div id="overlay" class="hidden fixed inset-0 bg-black/50 z-40 lg:hidden"></div>

  <!-- Sidebar -->
  <aside id="sidebar" class="fixed left-0 top-0 h-full w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 z-50 transform -translate-x-full lg:translate-x-0 transition-transform">
    <div class="flex flex-col h-full">
      <div class="h-16 flex items-center justify-between px-6 border-b border-gray-200 dark:border-gray-800">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-sm">A</span>
          </div>
          <span class="text-lg font-bold">AdminKit</span>
        </div>
        <button id="sidebarClose" class="lg:hidden p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>

      <nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 bg-primary-50 dark:bg-primary-700/20 text-primary-600 dark:text-primary-400 rounded-lg">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
          <span>Dashboard</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
          <span>Users</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
          <span>Products</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
          <span>Orders</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          <span>Settings</span>
        </a>
      </nav>

      <div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-9 h-9 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
            <span class="text-primary-600 dark:text-primary-400 font-semibold text-sm">A</span>
          </div>
          <div class="min-w-0">
            <p class="text-sm font-medium truncate">Alex Chen</p>
            <p class="text-xs text-gray-500 truncate">admin@example.com</p>
          </div>
        </div>
        <button id="themeToggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
          <span class="dark:hidden text-sm">🌙</span>
          <span class="hidden dark:inline text-sm">☀️</span>
        </button>
      </div>
    </div>
  </aside>

  <!-- Main content -->
  <main class="lg:ml-64 pt-16 lg:pt-0 min-h-screen">
    <div class="p-6 space-y-6">
      <!-- Page title -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
        <div>
          <h1 class="text-2xl font-bold">Dashboard</h1>
          <p class="text-sm text-gray-500 mt-1">Welcome back, Alex Chen</p>
        </div>
        <div class="flex items-center gap-3">
          <button class="px-4 py-2 border border-gray-200 dark:border-gray-700 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
            Export Report
          </button>
          <button class="px-4 py-2 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 transition-colors">
            + New
          </button>
        </div>
      </div>

      <!-- Stat cards -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm text-gray-500">Total Users</span>
            <div class="w-10 h-10 bg-blue-50 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
            </div>
          </div>
          <p class="text-3xl font-bold mb-1">24,589</p>
          <div class="flex items-center gap-1 text-sm">
            <span class="text-green-600 dark:text-green-400">+12.5%</span>
            <span class="text-gray-500">vs last month</span>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm text-gray-500">Total Revenue</span>
            <div class="w-10 h-10 bg-green-50 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
          </div>
          <p class="text-3xl font-bold mb-1">$892,400</p>
          <div class="flex items-center gap-1 text-sm">
            <span class="text-green-600 dark:text-green-400">+8.2%</span>
            <span class="text-gray-500">vs last month</span>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm text-gray-500">Orders</span>
            <div class="w-10 h-10 bg-purple-50 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
            </div>
          </div>
          <p class="text-3xl font-bold mb-1">3,847</p>
          <div class="flex items-center gap-1 text-sm">
            <span class="text-red-600 dark:text-red-400">-3.1%</span>
            <span class="text-gray-500">vs last month</span>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-200 dark:border-gray-800">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm text-gray-500">Conversion Rate</span>
            <div class="w-10 h-10 bg-orange-50 dark:bg-orange-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-5 h-5 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
            </div>
          </div>
          <p class="text-3xl font-bold mb-1">5.6%</p>
          <div class="flex items-center gap-1 text-sm">
            <span class="text-green-600 dark:text-green-400">+2.4%</span>
            <span class="text-gray-500">vs last month</span>
          </div>
        </div>
      </div>

      <!-- Chart section -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
          <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold">Revenue Trend</h3>
            <select class="px-3 py-1.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-xs focus:outline-none">
              <option>Last 7 Days</option>
              <option>Last 30 Days</option>
            </select>
          </div>
          <div class="h-48 flex items-end gap-2 px-2">
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-200 dark:bg-blue-900 rounded-t" style="height:45%"></div><span class="text-xs text-gray-500">M</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height:65%"></div><span class="text-xs text-gray-500">T</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height:50%"></div><span class="text-xs text-gray-500">W</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-500 dark:bg-blue-600 rounded-t" style="height:80%"></div><span class="text-xs text-gray-500">T</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-600 dark:bg-blue-500 rounded-t" style="height:70%"></div><span class="text-xs text-gray-500">F</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-400 dark:bg-blue-700 rounded-t" style="height:90%"></div><span class="text-xs text-gray-500">S</span></div>
            <div class="flex-1 flex flex-col items-center gap-1"><div class="w-full bg-blue-300 dark:bg-blue-800 rounded-t" style="height:60%"></div><span class="text-xs text-gray-500">S</span></div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
          <h3 class="text-lg font-semibold mb-6">Traffic Sources</h3>
          <div class="flex items-center justify-center">
            <div class="relative w-40 h-40">
              <svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#e5e7eb" stroke-width="3" class="dark:stroke-gray-700"/>
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#3b82f6" stroke-width="3" stroke-dasharray="40 60" stroke-dashoffset="0"/>
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#10b981" stroke-width="3" stroke-dasharray="25 75" stroke-dashoffset="-40"/>
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#f59e0b" stroke-width="3" stroke-dasharray="20 80" stroke-dashoffset="-65"/>
                <circle cx="18" cy="18" r="15.9" fill="none" stroke="#ef4444" stroke-width="3" stroke-dasharray="15 85" stroke-dashoffset="-85"/>
              </svg>
              <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span class="text-xl font-bold">100%</span>
              </div>
            </div>
            <div class="ml-8 space-y-2">
              <div class="flex items-center gap-2"><div class="w-3 h-3 bg-blue-500 rounded-full"></div><span class="text-sm">Search 40%</span></div>
              <div class="flex items-center gap-2"><div class="w-3 h-3 bg-green-500 rounded-full"></div><span class="text-sm">Direct 25%</span></div>
              <div class="flex items-center gap-2"><div class="w-3 h-3 bg-yellow-500 rounded-full"></div><span class="text-sm">Social 20%</span></div>
              <div class="flex items-center gap-2"><div class="w-3 h-3 bg-red-500 rounded-full"></div><span class="text-sm">Other 15%</span></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Data table -->
      <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800">
        <div class="p-4 border-b border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
          <h3 class="text-lg font-semibold">Recent Orders</h3>
          <input type="text" placeholder="Search orders..." class="w-full sm:w-64 px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50">
        </div>
        <div class="overflow-x-auto">
          <table class="w-full min-w-[640px]">
            <thead>
              <tr class="border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">Order ID</th>
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">Customer</th>
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">Amount</th>
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">Status</th>
                <th class="text-left px-4 py-3 text-xs font-medium text-gray-500 uppercase">Date</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
              <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                <td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7891</td>
                <td class="px-4 py-3 text-sm">John Doe</td>
                <td class="px-4 py-3 text-sm font-medium">$1,188</td>
                <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">Completed</span></td>
                <td class="px-4 py-3 text-sm text-gray-500">2025-01-15</td>
              </tr>
              <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                <td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7892</td>
                <td class="px-4 py-3 text-sm">Lisa Wang</td>
                <td class="px-4 py-3 text-sm font-medium">$3,588</td>
                <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 rounded-full">Processing</span></td>
                <td class="px-4 py-3 text-sm text-gray-500">2025-01-14</td>
              </tr>
              <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                <td class="px-4 py-3 text-sm font-mono text-blue-600">#ORD-7893</td>
                <td class="px-4 py-3 text-sm">Mike Zhang</td>
                <td class="px-4 py-3 text-sm font-medium">$99</td>
                <td class="px-4 py-3"><span class="px-2.5 py-0.5 text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full">Completed</span></td>
                <td class="px-4 py-3 text-sm text-gray-500">2025-01-13</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="p-4 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
          <p class="text-sm text-gray-500">Showing 1-3 of 256 results</p>
          <div class="flex items-center gap-1">
            <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg disabled:opacity-50" disabled>Previous</button>
            <button class="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg">1</button>
            <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg">2</button>
            <button class="px-3 py-1.5 text-sm border border-gray-200 dark:border-gray-700 rounded-lg">Next</button>
          </div>
        </div>
      </div>

      <!-- Form section -->
      <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
        <h3 class="text-lg font-semibold mb-6">Quick Add User</h3>
        <form class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <input type="text" placeholder="Full Name" class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
          <input type="email" placeholder="Email" class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500">
          <select class="px-4 py-2.5 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 appearance-none cursor-pointer">
            <option>Select Role</option>
            <option>Admin</option>
            <option>Editor</option>
            <option>Viewer</option>
          </select>
          <button type="submit" class="px-4 py-2.5 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700 active:bg-primary-800 transition-colors">
            Add User
          </button>
        </form>
      </div>
    </div>
  </main>

  <script>
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    document.getElementById('sidebarToggle')?.addEventListener('click', () => {
      sidebar.classList.toggle('-translate-x-full');
      overlay.classList.toggle('hidden');
    });
    document.getElementById('sidebarClose')?.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      overlay.classList.add('hidden');
    });
    overlay?.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      overlay.classList.add('hidden');
    });
    const toggleTheme = () => document.documentElement.classList.toggle('dark');
    document.getElementById('themeToggle')?.addEventListener('click', toggleTheme);
    document.getElementById('themeToggleMobile')?.addEventListener('click', toggleTheme);
  </script>

</body>
</html>
288 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

4. معايير القبول

5. الإضافات

❓ أسئلة شائعة

س متى يجب عليّ استخدام توجيه @apply في Tailwind؟
ج استخدم @apply عندما تحتاج إلى إعادة استخدام نفس مجموعة الأدوات المساعدة عبر عناصر متعددة. لكن تجنب الإفراط في استخدامها — فقوة Tailwind تكمن في الأدوات المساعدة المضمنة.
س كيف يمكنني تخصيص السمة الافتراضية لـ Tailwind؟
ج قم بتحرير ملف tailwind.config.js وقم بتوسيع كائن theme. يمكنك إضافة ألوان وخطوط ومسافات ونقاط توقف مخصصة.
س هل يُعد Tailwind CSS خيارًا جيدًا للمشاريع الكبيرة؟
ج نعم! إن نهج «الأدوات أولاً» الذي يتبعه Tailwind قابل للتوسع بشكل جيد. استخدم استخراج المكونات، و@apply للأنماط المتكررة، وتنظيم الملفات بشكل سليم.

📖 ملخص

📝 تمارين

  1. أساسي (مستوى الصعوبة: ⭐): قم بإنشاء مكون بطاقة متجاوب باستخدام أدوات flex و gap في Tailwind.
  2. المستوى المتوسط (الصعوبة: ⭐⭐): قم بإنشاء شريط تنقل مع قائمة «هامبرغر» مخصصة للجوال باستخدام Alpine.js وTailwind.
  3. متقدم (مستوى الصعوبة: ⭐⭐⭐): قم بإنشاء صفحة هبوط كاملة تتضمن أقسام «الملصق الرئيسي» و«الميزات» و«الأسعار» و«التذييل».
Web-Tutorial.com

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

100%