การดู : 289

25/04/2026 02:47น.

EP 10: ทดสอบฝีมือ: สร้างเว็บไซต์สวยๆ ด้วย Tailwind CSS แบบมืออาชีพ

EP 10: ทดสอบฝีมือ: สร้างเว็บไซต์สวยๆ ด้วย Tailwind CSS แบบมืออาชีพ

#Tailwind CSS

#Dark Mode CSS

#responsive design

#landing page design

มาถึงตอนสุดท้ายของซีรีย์แล้ว! หลังจากที่เราเรียนรู้ทุกเทคนิคของ Tailwind CSS มาแล้ว ถึงเวลาที่จะนำความรู้ทั้งหมดมาใช้สร้างโปรเจ็กต์จริงกัน

ในตอนนี้เราจะสร้างเว็บไซต์ Landing Page สำหรับ SaaS ที่สมบูรณ์แบบ ตั้งแต่การวางแผน การออกแบบ ไปจนถึงการเขียนโค้ดและการปรับแต่งให้มีประสิทธิภาพสูงสุด ซึ่งจะรวมทุกสิ่งที่เราเรียนรู้มาในซีรีย์นี้

 

การวางแผนโปรเจ็กต์

กำหนดเป้าหมายของโปรเจ็กต์

โปรเจ็กต์ที่เราจะสร้าง: TaskFlow Pro Landing Page

  • เว็บไซต์แนะนำแอป Task Management
  • มีระบบ Dark/Light Mode
  • รองรับ Mobile และ Desktop
  • มี Animation และ Interactive Elements
  • Performance ที่เหมาะสม

โครงสร้างหน้าเว็บไซต์

  1. Header + Navigation
  2. Hero Section - แนะนำผลิตภัณฑ์
  3. Features Section - ฟีเจอร์หลัก
  4. Pricing Section - แผนราคา
  5. Testimonials - รีวิวลูกค้า
  6. CTA Section - เรียกให้ดำเนินการ
  7. Footer

 

การตั้งค่าโปรเจ็กต์

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TaskFlow Pro - จัดการงานอย่างมืออาชีพ</title>
  <meta name="description" content="TaskFlow Pro ช่วยให้คุณจัดการงานได้อย่างมีประสิทธิภาพ ด้วยเครื่องมือที่ทันสมัยและใช้งานง่าย">
  
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Custom Configuration -->
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: {
              50: '#eff6ff',
              100: '#dbeafe',
              200: '#bfdbfe',
              300: '#93c5fd',
              400: '#60a5fa',
              500: '#3b82f6',
              600: '#2563eb',
              700: '#1d4ed8',
              800: '#1e40af',
              900: '#1e3a8a',
            },
            success: {
              50: '#f0fdf4',
              500: '#22c55e',
              600: '#16a34a',
            },
            warning: {
              50: '#fffbeb',
              500: '#f59e0b',
              600: '#d97706',
            },
            danger: {
              50: '#fef2f2',
              500: '#ef4444',
              600: '#dc2626',
            }
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'fade-in': 'fadeIn 0.5s ease-out',
            'slide-up': 'slideUp 0.5s ease-out',
            'scale-in': 'scaleIn 0.3s ease-out',
            'float': 'float 3s ease-in-out infinite',
          }
        }
      }
    }
  </script>
  
  <!-- Custom Styles -->
  <style>
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }
    
    .glass-effect {
      backdrop-filter: blur(16px) saturate(180%);
      background-color: rgba(255, 255, 255, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.125);
    }
    
    .dark .glass-effect {
      background-color: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.125);
    }
  </style>
</head>
<body class="font-sans antialiased bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">

 

สร้าง Header และ Navigation

<!-- Header -->
<header class="fixed top-0 left-0 right-0 z-50 glass-effect">
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex items-center space-x-2">
        <div class="w-8 h-8 bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <span class="text-xl font-bold text-gray-900 dark:text-white">TaskFlow Pro</span>
      </div>
      
      <!-- Desktop Navigation -->
      <div class="hidden md:flex items-center space-x-8">
        <a href="#features" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
          ฟีเจอร์
        </a>
        <a href="#pricing" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
          ราคา
        </a>
        <a href="#testimonials" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
          รีวิว
        </a>
        <a href="#" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
          เข้าสู่ระบบ
        </a>
      </div>
      
      <!-- CTA + Theme Toggle -->
      <div class="flex items-center space-x-4">
        <!-- Theme Toggle -->
        <button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors">
          <svg class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
          </svg>
          <svg class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
        </button>
        
        <!-- CTA Button -->
        <button class="hidden md:inline-flex items-center px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition-all duration-200 transform hover:scale-105">
          เริ่มใช้ฟรี
        </button>
        
        <!-- Mobile Menu Button -->
        <button class="md:hidden p-2 rounded-lg bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors" id="mobile-menu-button">
          <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="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
    
    <!-- Mobile Navigation -->
    <div class="md:hidden hidden" id="mobile-menu">
      <div class="px-2 pt-2 pb-3 space-y-1 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
        <a href="#features" class="block px-3 py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
          ฟีเจอร์
        </a>
        <a href="#pricing" class="block px-3 py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
          ราคา
        </a>
        <a href="#testimonials" class="block px-3 py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
          รีวิว
        </a>
        <a href="#" class="block px-3 py-2 text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
          เข้าสู่ระบบ
        </a>
        <button class="w-full mt-4 px-6 py-2 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg transition-colors">
          เริ่มใช้ฟรี
        </button>
      </div>
    </div>
  </nav>
</header>

 

Hero Section - การแนะนำผลิตภัณฑ์

<!-- Hero Section -->
<section class="pt-24 pb-12 lg:pt-32 lg:pb-20 bg-gradient-to-br from-primary-50 via-white to-primary-50 dark:from-gray-900 dark:via-gray-900 dark:to-primary-900/20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
      <!-- Left Content -->
      <div class="text-center lg:text-left">
        <div class="animate-fade-in">
          <span class="inline-block px-3 py-1 bg-primary-100 dark:bg-primary-900/50 text-primary-700 dark:text-primary-300 text-sm font-medium rounded-full mb-4">
            🚀 ใหม่! AI-Powered Task Management
          </span>
          
          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white leading-tight mb-6">
            จัดการงานให้
            <span class="bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent">
              เป็นระบบ
            </span>
            <br>แบบมืออาชีพ
          </h1>
          
          <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 leading-relaxed max-w-2xl mx-auto lg:mx-0">
            TaskFlow Pro ช่วยให้ทีมของคุณจัดการโปรเจ็กต์ได้อย่างมีประสิทธิภาพ 
            ด้วย AI ที่ช่วยวิเคราะห์และปรับปรุงขั้นตอนการทำงานให้ดีขึ้นเรื่อยๆ
          </p>
          
          <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-8">
            <button class="inline-flex items-center justify-center px-8 py-4 bg-primary-500 hover:bg-primary-600 text-white font-semibold rounded-xl text-lg transition-all duration-200 transform hover:scale-105 hover:shadow-lg">
              เริ่มใช้งานฟรี
              <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
              </svg>
            </button>
            
            <button class="inline-flex items-center justify-center px-8 py-4 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-900 dark:text-white font-semibold rounded-xl text-lg border border-gray-200 dark:border-gray-700 transition-all duration-200 transform hover:scale-105">
              <svg class="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M12 5v.01M3 12a9 9 0 1018 0 9 9 0 00-18 0z"></path>
              </svg>
              ชมการสาธิต
            </button>
          </div>
          
          <!-- Social Proof -->
          <div class="flex items-center justify-center lg:justify-start space-x-6 text-sm text-gray-500 dark:text-gray-400">
            <div class="flex items-center">
              <span class="text-2xl font-bold text-primary-500">15K+</span>
              <span class="ml-1">ทีมที่ใช้งาน</span>
            </div>
            <div class="flex items-center">
              <span class="text-2xl font-bold text-primary-500">4.9</span>
              <div class="flex ml-1">
                ⭐⭐⭐⭐⭐
              </div>
            </div>
            <div class="flex items-center">
              <span class="text-2xl font-bold text-primary-500">99.9%</span>
              <span class="ml-1">Uptime</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Right Content - Dashboard Preview -->
      <div class="relative animate-slide-up">
        <div class="relative z-10">
          <!-- Dashboard Mockup -->
          <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden border border-gray-200 dark:border-gray-700">
            <!-- Dashboard Header -->
            <div class="bg-gray-50 dark:bg-gray-900 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
              <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                  <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                  <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                  <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                </div>
                <div class="text-sm text-gray-500 dark:text-gray-400">TaskFlow Pro Dashboard</div>
              </div>
            </div>
            
            <!-- Dashboard Content -->
            <div class="p-6">
              <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">โปรเจ็กต์ปัจจุบัน</h3>
                <span class="px-3 py-1 bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300 text-sm rounded-full">
                  5 โปรเจ็กต์
                </span>
              </div>
              
              <!-- Project Cards -->
              <div class="space-y-3">
                <div class="flex items-center justify-between p-4 bg-primary-50 dark:bg-primary-900/20 rounded-lg border border-primary-200 dark:border-primary-800">
                  <div class="flex items-center space-x-3">
                    <div class="w-3 h-3 bg-primary-500 rounded-full"></div>
                    <div>
                      <div class="font-medium text-gray-900 dark:text-white">Website Redesign</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">กำลังดำเนินการ</div>
                    </div>
                  </div>
                  <div class="text-right">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">75%</div>
                    <div class="w-16 h-2 bg-gray-200 dark:bg-gray-700 rounded-full mt-1">
                      <div class="w-3/4 h-full bg-primary-500 rounded-full"></div>
                    </div>
                  </div>
                </div>
                
                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                  <div class="flex items-center space-x-3">
                    <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                    <div>
                      <div class="font-medium text-gray-900 dark:text-white">Mobile App</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">รอการอนุมัติ</div>
                    </div>
                  </div>
                  <div class="text-right">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">45%</div>
                    <div class="w-16 h-2 bg-gray-200 dark:bg-gray-700 rounded-full mt-1">
                      <div class="w-2/5 h-full bg-yellow-500 rounded-full"></div>
                    </div>
                  </div>
                </div>
                
                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                  <div class="flex items-center space-x-3">
                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                    <div>
                      <div class="font-medium text-gray-900 dark:text-white">Marketing Campaign</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">เสร็จสิ้นแล้ว</div>
                    </div>
                  </div>
                  <div class="text-right">
                    <div class="text-sm font-medium text-gray-900 dark:text-white">100%</div>
                    <div class="w-16 h-2 bg-gray-200 dark:bg-gray-700 rounded-full mt-1">
                      <div class="w-full h-full bg-green-500 rounded-full"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Floating Elements -->
        <div class="absolute -top-4 -left-4 w-20 h-20 bg-primary-200 dark:bg-primary-800 rounded-full opacity-20 animate-float"></div>
        <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-primary-300 dark:bg-primary-700 rounded-full opacity-30 animate-float" style="animation-delay: 1s;"></div>
        <div class="absolute top-1/2 -left-8 w-12 h-12 bg-primary-400 dark:bg-primary-600 rounded-full opacity-20 animate-float" style="animation-delay: 2s;"></div>
      </div>
    </div>
  </div>
</section>

 

Features Section - ฟีเจอร์หลัก

<!-- Features Section -->
<section id="features" class="py-20 bg-white dark:bg-gray-900">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section Header -->
    <div class="text-center mb-16 animate-fade-in">
      <span class="inline-block px-3 py-1 bg-primary-100 dark:bg-primary-900/50 text-primary-700 dark:text-primary-300 text-sm font-medium rounded-full mb-4">
        ฟีเจอร์เด่น
      </span>
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
        ทุกอย่างที่คุณต้องการ
        <span class="bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent">
          ในที่เดียว
        </span>
      </h2>
      <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        TaskFlow Pro มาพร้อมกับเครื่องมือครบครันที่จะช่วยให้ทีมของคุณทำงานได้อย่างมีประสิทธิภาพสูงสุด
      </p>
    </div>
    
    <!-- Features Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Feature 1 -->
      <div class="group bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-scale-in">
        <div class="w-12 h-12 bg-primary-100 dark:bg-primary-900/50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
          <svg class="w-6 h-6 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
          จัดการงานอัจฉริยะ
        </h3>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
          AI ช่วยจัดลำดับความสำคัญของงาน วิเคราะห์ขั้นตอนการทำงาน และแนะนำวิธีการปรับปรุงประสิทธิภาพ
        </p>
      </div>
      
      <!-- Feature 2 -->
      <div class="group bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-scale-in" style="animation-delay: 0.1s;">
        <div class="w-12 h-12 bg-success-100 dark:bg-success-900/50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
          <svg class="w-6 h-6 text-success-600 dark:text-success-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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
          ทำงานร่วมกันแบบเรียลไทม์
        </h3>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
          แชร์งาน แสดงความคิดเห็น และติดตามความคืบหน้าแบบเรียลไทม์ ทำให้ทีมประสานงานกันได้อย่างมีประสิทธิภาพ
        </p>
      </div>
      
      <!-- Feature 3 -->
      <div class="group bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 hover:border-primary-300 dark:hover:border-primary-600 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 animate-scale-in" style="animation-delay: 0.2s;">
        <div class="w-12 h-12 bg-warning-100 dark:bg-warning-900/50 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
          <svg class="w-6

 

CTA Section - Call to Action

<!-- CTA Section -->
<section class="py-20 bg-gradient-to-br from-primary-600 via-primary-500 to-primary-600 relative overflow-hidden">
  <!-- Background Pattern -->
  <div class="absolute inset-0 opacity-10">
    <div class="absolute top-10 left-10 w-20 h-20 bg-white rounded-full"></div>
    <div class="absolute top-40 right-20 w-16 h-16 bg-white rounded-full"></div>
    <div class="absolute bottom-20 left-1/4 w-12 h-12 bg-white rounded-full"></div>
    <div class="absolute bottom-40 right-1/3 w-24 h-24 bg-white rounded-full"></div>
  </div>
  
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
    <div class="animate-fade-in">
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">
        Ready to Transform
        <br>Your Task Management?
      </h2>
      <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
        Join over 15,000 teams who chose TaskFlow Pro 
        to boost their work efficiency
      </p>
      
      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
        <button class="inline-flex items-center justify-center px-8 py-4 bg-white hover:bg-gray-50 text-primary-600 font-semibold rounded-xl text-lg transition-all duration-200 transform hover:scale-105 shadow-lg">
          Start 14-Day Free Trial
          <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
          </svg>
        </button>
        
        <button class="inline-flex items-center justify-center px-8 py-4 bg-transparent hover:bg-white/10 text-white font-semibold rounded-xl text-lg border-2 border-white/30 hover:border-white/50 transition-all duration-200">
          <svg class="mr-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M12 5v.01M3 12a9 9 0 1018 0 9 9 0 00-18 0z"></path>
          </svg>
          Watch Demo
        </button>
      </div>
      
      <div class="flex items-center justify-center space-x-6 text-primary-100">
        <div class="flex items-center text-sm">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          No credit card required
        </div>
        <div class="flex items-center text-sm">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          Cancel anytime
        </div>
        <div class="flex items-center text-sm">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          30-day guarantee
        </div>
      </div>
    </div>
  </div>
</section>

 

Footer

<!-- Footer -->
<footer class="bg-gray-900 dark:bg-black text-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
      <!-- Company Info -->
      <div>
        <div class="flex items-center space-x-2 mb-4">
          <div class="w-8 h-8 bg-gradient-to-r from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <span class="text-xl font-bold">TaskFlow Pro</span>
        </div>
        <p class="text-gray-400 mb-4">
          Professional task management with AI that helps boost your team's work efficiency
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
            </svg>
          </a>
          <a href="#" class="text-gray-400 hover:text-white transition-colors">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
            </svg>
          </a>
        </div>
      </div>
      
      <!-- Product Links -->
      <div>
        <h4 class="font-semibold mb-4">Product</h4>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Features</a></li>
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Security</a></li>
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Integrations</a></li>
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Updates</a></li>
        </ul>
      </div>
      
      <!-- Company Links -->
      <div>
        <h4 class="font-semibold mb-4">Company</h4>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About Us</a></li>
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Team</a></li>
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">News</a></li>
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li>
        </ul>
      </div>
      
      <!-- Support Links -->
      <div>
        <h4 class="font-semibold mb-4">Support</h4>
        <ul class="space-y-2">
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Help Center</a></li>
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact Us</a></li>
          <li><a href="#" class="text-gray-400 hover:text-white transition-colors">System Status</a></li>
        </ul>
      </div>
    </div>
    
    <!-- Bottom Footer -->
    <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
      <div class="text-gray-400 text-sm mb-4 md:mb-0">
        © 2025 TaskFlow Pro. All rights reserved.
      </div>
      <div class="flex space-x-6 text-sm">
        <a href="#" class="text-gray-400 hover:text-white transition-colors">Privacy Policy</a>
        <a href="#" class="text-gray-400 hover:text-white transition-colors">Terms of Service</a>
        <a href="#" class="text-gray-400 hover:text-white transition-colors">Cookies</a>
      </div>
    </div>
  </div>
</footer>

<!-- JavaScript -->
<script>
// Theme Toggle
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;

themeToggle.addEventListener('click', () => {
  html.classList.toggle('dark');
  localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
});

// Initialize theme
if (localStorage.getItem('theme') === 'dark' || 
    (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  html.classList.add('dark');
}

// Mobile Menu Toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');

mobileMenuButton.addEventListener('click', () => {
  mobileMenu.classList.toggle('hidden');
});

// Smooth Scroll for Navigation Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  });
});

// Animation on Scroll
const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.opacity = '1';
      entry.target.style.transform = 'translateY(0)';
    }
  });
}, observerOptions);

// Observe elements with animation classes
document.querySelectorAll('.animate-fade-in, .animate-slide-up, .animate-scale-in').forEach(el => {
  el.style.opacity = '0';
  el.style.transform = 'translateY(20px)';
  el.style.transition = 'all 0.6s ease-out';
  observer.observe(el);
});
</script>

</body>
</html>

 

การปรับแต่ง Performance

ข้อแนะนำสำหรับ Production

1. ปรับแต่ง Tailwind Configuration

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      // Use only colors that are actually used
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
        }
      }
    },
  },
  plugins: [],
}

2. การ Minify และ Compress

# ใช้ PostCSS plugins
npm install cssnano autoprefixer

3. การใช้ CDN อย่างมีประสิทธิภาพ

<!-- Use CDN for Development only -->
<!-- For Production, build and host locally -->
<link rel="preload" href="/css/main.css" as="style">
<link rel="stylesheet" href="/css/main.css">

4. การ Lazy Loading

<!-- ใช้ loading="lazy" สำหรับรูปภาพ --> <img loading="lazy" src="image.jpg" alt="Description">  <!-- ใช้ Intersection Observer สำหรับ Animation --> <script>
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
});
 lazyImages.forEach(img => imageObserver.observe(img));
</script>

 

Best Practices ที่ใช้ในโปรเจ็กต์

1. Responsive Design

  • ใช้ Mobile-First Approach: เริ่มจาก mobile แล้วขยายไป desktop
  • ทดสอบในหน้าจอขนาดต่างๆ: รองรับทุกอุปกรณ์
  • ใช้ Container Queries เมื่อเหมาะสม: สำหรับ component ที่ซับซ้อน

2. Accessibility

  • ใส่ alt attributes ในรูปภาพ: สำหรับ screen readers
  • ใช้ semantic HTML: ช่วยให้เข้าใจโครงสร้างได้ดี
  • รองรับ keyboard navigation: สำหรับผู้ใช้ที่ไม่สามารถใช้เมาส์ได้
  • มี color contrast ที่เพียงพอ: เพื่อการมองเห็นที่ดี

3. Performance

  • ใช้ loading="lazy" สำหรับรูปภาพ: ลดเวลาโหลดหน้าแรก
  • Minimize JavaScript: ใช้ JS เฉพาะที่จำเป็น
  • ใช้ CSS transitions แทน JavaScript animation: เร็วกว่าและนุ่มนวลกว่า
  • ปรับแต่ง Tailwind purging: ลบ CSS ที่ไม่ใช้ออก

4. SEO

  • Meta tags ที่ครบถ้วน: title, description, keywords
  • Structured data: ช่วยให้ search engine เข้าใจเนื้อหา
  • Fast loading speed: ส่งผลต่อการ ranking
  • Mobile-friendly design: Google ให้ความสำคัญกับ mobile-first

5. User Experience

  • Loading states และ animations: ทำให้รู้สึกว่าระบบตอบสนอง
  • Clear navigation: ง่ายต่อการใช้งาน
  • Consistent design system: สร้างความเชื่อมั่น
  • Error states และ feedback: ช่วยผู้ใช้เข้าใจสถานการณ์

 

การ Deploy และ Maintenance

ขั้นตอนการ Deploy

1. การ Build สำหรับ Production

# Install dependencies
npm install

# Build CSS
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify

# Optimize HTML
# - Change from CDN to local CSS file
# - Remove tailwind.config from HTML
# - Add analytics tracking codes

2. การ Optimize รูปภาพ

# Use tools to optimize images
npm install -g imagemin-cli

imagemin images/* --out-dir=images/optimized

3. การตั้งค่า Server

# nginx configuration
server {
    listen 80;
    server_name yourdomain.com;
    
    location / {
        root /var/www/html;
        index index.html;
        try_files $uri $uri/ =404;
    }
    
    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

 

การ Monitor และ Analytics

1. Performance Monitoring

 
<!-- Google PageSpeed Insights --> <!-- GTmetrix --> <!-- WebPageTest.org -->  <!-- Core Web Vitals --> <script>
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});
</script>

2. User Analytics

 
<!-- Google Analytics 4 --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

 

สรุปโปรเจ็กต์

ในโปรเจ็กต์ TaskFlow Pro Landing Page นี้ เราได้นำเอาความรู้ทั้งหมดจากซีรีย์ "10 EP สู่การเป็นมือโปร Tailwind CSS" มาใช้งานครบถ้วน:

🎨 Design System:

  • Color palette ที่สอดคล้องกัน
  • Typography hierarchy ที่ชัดเจน
  • Spacing system ที่เป็นระบบ
  • Component library ที่ใช้ซ้ำได้

📱 Responsive Design:

  • Mobile-First approach
  • Breakpoints ที่เหมาะสม
  • ทดสอบในทุกขนาดหน้าจอ
  • Touch-friendly interface

⚡ Performance:

  • CSS file size ที่เล็ก
  • Lazy loading images
  • Smooth animations
  • Fast loading time

🌙 Dark Mode:

  • Support ระบบ dark mode
  • Automatic detection
  • Smooth transitions
  • Consistent styling

💫 Interactions:

  • Hover effects
  • Click animations
  • Scroll-triggered animations
  • Micro-interactions

♿ Accessibility:

  • Semantic HTML
  • Keyboard navigation
  • Screen reader support
  • High contrast ratios

🔧 Best Practices:

  • Clean code structure
  • Maintainable CSS
  • SEO optimization
  • Cross-browser compatibility

 

 

บทสรุป

นี่คือจุดสิ้นสุดของซีรีย์ "10 EP สู่การเป็นมือโปร Tailwind CSS" 🎉

ตอนนี้คุณพร้อมแล้วที่จะ:

✅ สร้างเว็บไซต์ที่สวยงามและมีประสิทธิภาพ

✅ จัดการ Design System อย่างเป็นระบบ

✅ ใช้ Tailwind CSS แบบมืออาชีพ

✅ แก้ไขปัญหาและ optimize performance

✅ สร้างโปรเจ็กต์จริงได้ด้วยตัวเอง

ขั้นตอนต่อไป:

  1. ฝึกฝนต่อ: ลองสร้างโปรเจ็กต์ของตัวเองด้วยแนวคิดใหม่ๆ
  2. ติดตามอัปเดต: Tailwind CSS มีการพัฒนาอย่างต่อเนื่อง
  3. เข้าร่วมชุมชน: แชร์ผลงานและเรียนรู้จากคนอื่น
  4. สอนต่อ: ถ่ายทอดความรู้ให้กับคนอื่น

ขอบคุณที่ติดตาม Superdev School! 🚀

หวังว่าซีรีย์นี้จะช่วยให้คุณกลายเป็นมือโปร Tailwind CSS ได้จริงๆ และสร้างผลงานที่น่าประทับใจออกมา

พบกันใหม่ในซีรีย์หน้า! ✨

อ่านบทความ Series อื่นๆ

🔵 Facebook: Superdev School  (Superdev)

📸 Instagram: superdevschool

🎬 TikTok: superdevschool

🌐 Website: www.superdev.school