View : 235
12/05/2026 01:13am
EP 10: Skills Test: Building a Beautiful Website with Professional Tailwind CSS
#Tailwind CSS
#responsive web design
#Dark Mode CSS
#landing page tutorial
We've reached the final episode of our series! After learning all the techniques of Tailwind CSS, it's time to apply all our knowledge to create a real project.
In this episode, we'll build a complete SaaS Landing Page for "TaskFlow Pro" from planning and design to coding and performance optimization. This will incorporate everything we've learned throughout this series.
Project Planning
Project Goals
Project we'll build: TaskFlow Pro Landing Page
- Task Management app introduction website
- Dark/Light Mode system
- Mobile and Desktop responsive
- Animation and Interactive Elements
- Optimized performance
Website Structure
- Header + Navigation
- Hero Section - Product introduction
- Features Section - Main features
- Pricing Section - Pricing plans
- Testimonials - Customer reviews
- CTA Section - Call to action
- Footer
Project Setup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaskFlow Pro - Professional Task Management</title>
<meta name="description" content="TaskFlow Pro helps you manage tasks efficiently with modern tools and easy-to-use interface">
<!-- 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 and 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">
Features
</a>
<a href="#pricing" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
Pricing
</a>
<a href="#testimonials" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
Reviews
</a>
<a href="#" class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 transition-colors">
Sign In
</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">
Start Free Trial
</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">
Features
</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">
Pricing
</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">
Reviews
</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">
Sign In
</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">
Start Free Trial
</button>
</div>
</div>
</nav>
</header>
Hero Section - Product Introduction
<!-- 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">
🚀 New! 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">
Manage Tasks
<span class="bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent">
Systematically
</span>
<br>Like a Professional
</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 helps your team manage projects efficiently
with AI that analyzes and continuously improves your workflow processes.
</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">
Start 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-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>
Watch Demo
</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">Active Teams</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">Current Projects</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 Projects
</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">In Progress</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">Pending Approval</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">Completed</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 - Main Features
<!-- 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">
Key Features
</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Everything You Need
<span class="bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent">
In One Place
</span>
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
TaskFlow Pro comes with comprehensive tools that help your team work at maximum efficiency
</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">
Smart Task Management
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
AI helps prioritize tasks, analyze workflow processes, and recommend ways to improve efficiency
</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">
Real-time Collaboration
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
Share tasks, comment, and track progress in real-time, enabling teams to coordinate efficiently
</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 h-6 text-warning-600 dark:text-warning-400" 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"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
Reports and Analytics
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
View work statistics, analyze team performance, and get insights to continuously improve processes
</p>
</div>
<!-- Feature 4 -->
<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.3s;">
<div class="w-12 h-12 bg-purple-100 dark:bg-purple-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-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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
Enterprise Security
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
End-to-End encryption, Two-Factor Authentication, and automatic data backup systems
</p>
</div>
<!-- Feature 5 -->
<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.4s;">
<div class="w-12 h-12 bg-indigo-100 dark:bg-indigo-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-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
Connect Your Apps
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
Supports integration with Slack, Google Workspace, Microsoft 365, and many other applications
</p>
</div>
<!-- Feature 6 -->
<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.5s;">
<div class="w-12 h-12 bg-pink-100 dark:bg-pink-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-pink-600 dark:text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
Cross-Device Support
</h3>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
Works on mobile, tablet, and computer with real-time data sync across all devices
</p>
</div>
</div>
</div>
</section>
Pricing Section - Pricing Plans
<!-- Pricing Section -->
<section id="pricing" class="py-20 bg-gray-50 dark:bg-gray-800">
<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">
Pricing Plans
</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Choose the Plan
<span class="bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent">
That's Right for You
</span>
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Start free and upgrade as your team grows. All plans come with a 30-day guarantee
</p>
</div>
<!-- Pricing Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Basic Plan -->
<div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-8 animate-scale-in">
<div class="text-center">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
Basic
</h3>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900 dark:text-white">Free</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
Perfect for small teams and personal use
</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">Up to 5 members</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">10 projects</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">1GB storage</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">Basic reports</span>
</li>
</ul>
<button class="w-full py-3 px-6 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-medium rounded-xl transition-colors">
Start Free
</button>
</div>
<!-- Pro Plan (Popular) -->
<div class="bg-white dark:bg-gray-900 rounded-2xl border-2 border-primary-500 p-8 relative animate-scale-in" style="animation-delay: 0.1s;">
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<span class="px-4 py-2 bg-primary-500 text-white text-sm font-medium rounded-full">
Recommended
</span>
</div>
<div class="text-center">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
Pro
</h3>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900 dark:text-white">$29</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
Perfect for growing teams and businesses
</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">Up to 25 members</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">Unlimited projects</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">100GB storage</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">Advanced reports + AI Insights</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">API integrations</span>
</li>
</ul>
<button class="w-full py-3 px-6 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-xl transition-colors">
Choose Pro Plan
</button>
</div>
<!-- Enterprise Plan -->
<div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-8 animate-scale-in" style="animation-delay: 0.2s;">
<div class="text-center">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
Enterprise
</h3>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900 dark:text-white">$99</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
Perfect for large organizations and enterprises
</p>
</div>
<ul class="space-y-4 mb-8">
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">Unlimited members</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">Unlimited projects</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">1TB storage</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">Custom AI Models</span>
</li>
<li class="flex items-center">
<svg class="w-5 h-5 text-green-500 mr-3" 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>
<span class="text-gray-600 dark:text-gray-300">24/7 Premium Support</span>
</li>
</ul>
<button class="w-full py-3 px-6 bg-gray-900 hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-100 text-white dark:text-gray-900 font-medium rounded-xl transition-colors">
Contact Sales
</button>
</div>
</div>
<!-- Money Back Guarantee -->
<div class="text-center mt-12">
<div class="inline-flex items-center px-4 py-2 bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300 rounded-full">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
30-day money-back guarantee if not satisfied
</div>
</div>
</div>
</section>
Testimonials Section - Customer Reviews
<!-- Testimonials Section -->
<section id="testimonials" 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">
Customer Reviews
</span>
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4">
Our Customers
<span class="bg-gradient-to-r from-primary-600 to-primary-500 bg-clip-text text-transparent">
Love Us
</span>
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Hear from over 15,000 teams who chose TaskFlow Pro for task management
</p>
</div>
<!-- Testimonials Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 animate-scale-in">
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
⭐⭐⭐⭐⭐
</div>
</div>
<blockquote class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
"TaskFlow Pro has helped our team manage projects much more efficiently.
The AI in the system helps us plan work much better than before."
</blockquote>
<div class="flex items-center">
<img class="w-12 h-12 rounded-full object-cover mr-4"
src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=96&h=96&fit=crop&crop=face"
alt="Sarah Johnson">
<div>
<div class="font-semibold text-gray-900 dark:text-white">Sarah Johnson</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Product Manager, Tech Startup</div>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 animate-scale-in" style="animation-delay: 0.1s;">
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
⭐⭐⭐⭐⭐
</div>
</div>
<blockquote class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
"TaskFlow Pro's reporting system provides very comprehensive data.
It helps us make informed decisions in team management."
</blockquote>
<div class="flex items-center">
<img class="w-12 h-12 rounded-full object-cover mr-4"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=96&h=96&fit=crop&crop=face"
alt="Michael Chen">
<div>
<div class="font-semibold text-gray-900 dark:text-white">Michael Chen</div>
<div class="text-sm text-gray-500 dark:text-gray-400">CEO, Digital Agency</div>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white dark:bg-gray-800 p-8 rounded-2xl border border-gray-200 dark:border-gray-700 animate-scale-in" style="animation-delay: 0.2s;">
<div class="flex items-center mb-4">
<div class="flex text-yellow-400">
⭐⭐⭐⭐⭐
</div>
</div>
<blockquote class="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
"Using TaskFlow Pro increased our team efficiency by 40%
and reduced meeting time by half."
</blockquote>
<div class="flex items-center">
<img class="w-12 h-12 rounded-full object-cover mr-4"
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96&h=96&fit=crop&crop=face"
alt="Emma Wilson">
<div>
<div class="font-semibold text-gray-900 dark:text-white">Emma Wilson</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Director, Marketing Team</div>
</div>
</div>
</div>
</div>
<!-- Stats Section -->
<div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="text-center">
<div class="text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2">
15K+
</div>
<div class="text-gray-600 dark:text-gray-300">Active Teams</div>
</div>
<div class="text-center">
<div class="text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2">
2M+
</div>
<div class="text-gray-600 dark:text-gray-300">Tasks Managed</div>
</div>
<div class="text-center">
<div class="text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2">
99.9%
</div>
<div class="text-gray-600 dark:text-gray-300">Uptime</div>
</div>
<div class="text-center">
<div class="text-3xl md:text-4xl font-bold text-primary-600 dark:text-primary-400 mb-2">
4.9/5
</div>
<div class="text-gray-600 dark:text-gray-300">Review Score</div>
</div>
</div>
</div>
</section>
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 Optimization
Production Recommendations
1. Optimize 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 and Compress
# Use PostCSS plugins
npm install cssnano autoprefixer
3. Efficient CDN Usage
<!-- 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 Implementation
<!-- Use loading="lazy" for images -->
<img loading="lazy" src="image.jpg" alt="Description">
<!-- Use Intersection Observer for animations -->
<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 Used in This Project
1. Responsive Design
- Mobile-First Approach: Start with mobile design, then expand
- Multi-device Testing: Test on various screen sizes
- Container Queries: Use when appropriate
2. Accessibility
- Alt Attributes: Include for all images
- Semantic HTML: Use proper HTML elements
- Keyboard Navigation: Support keyboard users
- Color Contrast: Ensure sufficient contrast ratios
3. Performance
- Lazy Loading: For images and heavy content
- JavaScript Minimization: Keep JavaScript lean
- CSS Transitions: Use instead of JavaScript animations
- Tailwind Purging: Optimize unused CSS
4. SEO
- Complete Meta Tags: Title, description, etc.
- Structured Data: When applicable
- Fast Loading: Optimize for speed
- Mobile-Friendly: Responsive design
5. User Experience
- Loading States: Show progress and feedback
- Clear Navigation: Easy to understand
- Consistent Design: Follow design system
- Error Handling: Provide helpful feedback
Deployment and Maintenance
Deployment Steps
1. Production Build
# 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. Image Optimization
# Use tools to optimize images
npm install -g imagemin-cli
imagemin images/* --out-dir=images/optimized
3. Server Configuration
# 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";
}
}
Monitoring and 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>
Project Summary
In this TaskFlow Pro Landing Page project, we've applied all the knowledge from our "10 Episodes to Tailwind CSS Mastery" series:
🎨 Design System:
- Consistent color palette
- Clear typography hierarchy
- Systematic spacing system
- Reusable component library
📱 Responsive Design:
- Mobile-First approach
- Appropriate breakpoints
- Multi-device testing
- Touch-friendly interface
⚡ Performance:
- Small CSS file size
- Lazy loading images
- Smooth animations
- Fast loading times
🌙 Dark Mode:
- Dark mode system support
- 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
Conclusion
This marks the end of our "10 Episodes to Tailwind CSS Mastery" series! 🎉
You're now ready to:
✅ Build beautiful and efficient websites
✅ Manage design systems systematically
✅ Use Tailwind CSS professionally
✅ Solve problems and optimize performance
✅ Create real projects independently
Next Steps:
- Keep Practicing: Try building your own projects with new concepts
- Stay Updated: Tailwind CSS continues to evolve
- Join Communities: Share your work and learn from others
- Teach Others: Pass on your knowledge to fellow developers
Thank you for following along with this series! 🚀
We hope this series has truly helped you become a Tailwind CSS professional and create impressive projects.
See you in our next series! ✨
Read more
🔵 Facebook: Superdev School (Superdev)
📸 Instagram: superdevschool
🎬 TikTok: superdevschool
🌐 Website: www.superdev.school