Practical Project

In this chapter, you put everything you have learned to use and build a landing page.

Project overview

You create a landing page for a SaaS product.

Sections included

1. Hero
2. Features
3. Pricing
4. FAQ
5. CTA
6. Footer

Setup

# Create the project
npm create vite@latest tailwind-landing -- --template vanilla
cd tailwind-landing

# Install Tailwind CSS
npm install tailwindcss @tailwindcss/vite

vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

src/style.css

@import "tailwindcss";

@theme {
  --animate-blob: blob 7s infinite;
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

/* animation-delay is defined as custom CSS since Tailwind CSS has no built-in for it */
.animation-delay-2000 {
  animation-delay: 2s;
}
.animation-delay-4000 {
  animation-delay: 4s;
}

animate-blob is a custom definition

animate-blob is not a built-in Tailwind CSS animation. It is custom-defined using the @theme and @keyframes you learned in Chapter 16 / Customization. animation-delay-* is also not built into Tailwind, so it is defined as a regular CSS class. Note that in v4, you can use arbitrary-property syntax such as [animation-delay:2s] to specify it inline without defining a custom CSS class.

Hero section

<section class="relative overflow-hidden bg-linear-to-br from-blue-600 via-blue-700 to-purple-700">
  <!-- Background decoration -->
  <div class="absolute inset-0 opacity-30">
    <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl animate-blob"></div>
    <div class="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-2000"></div>
    <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-blob animation-delay-4000"></div>
  </div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 lg:py-40">
    <div class="text-center">
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight">
        <span class="block">Accelerate your business</span>
        <span class="block mt-2 bg-clip-text text-transparent bg-linear-to-r from-yellow-200 to-pink-200">
          A next-generation platform
        </span>
      </h1>
      <p class="mt-6 text-lg md:text-xl text-blue-100 max-w-2xl mx-auto">
        Streamline, automate, and scale up. Do it all on a single platform.
        Get started for free today.
      </p>
      <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
        <a href="#" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-blue-700 bg-white rounded-xl hover:bg-blue-50 transition-colors shadow-lg hover:shadow-xl">
          Get started for free
          <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" />
          </svg>
        </a>
        <a href="#" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white border-2 border-white/30 rounded-xl hover:bg-white/10 transition-colors">
          Watch the demo
        </a>
      </div>
    </div>

    <!-- Dashboard preview -->
    <div class="mt-16 relative">
      <div class="absolute inset-0 bg-linear-to-t from-blue-700 via-transparent to-transparent z-10"></div>
      <img
        src="https://placehold.co/1200x600/1e40af/ffffff?text=Dashboard+Preview"
        alt="Dashboard preview"
        class="w-full rounded-xl shadow-2xl border border-white/20"
      />
    </div>
  </div>
</section>

Features section

<section class="py-20 md:py-28 bg-white">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <span class="text-blue-600 font-semibold uppercase tracking-wide">Features</span>
      <h2 class="mt-2 text-3xl md:text-4xl font-bold text-gray-900">
        An all-in-one platform
      </h2>
      <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
        We provide everything you need to maximize your team's productivity.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Feature card 1 -->
      <div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
        <div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center group-hover:bg-blue-600 group-hover:text-white transition-colors">
          <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
        </div>
        <h3 class="mt-6 text-xl font-bold text-gray-900">High-speed processing</h3>
        <p class="mt-2 text-gray-600">
          The latest technology makes processing 10x faster, drastically reducing wait times.
        </p>
      </div>

      <!-- Feature card 2 -->
      <div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
        <div class="w-14 h-14 bg-green-100 text-green-600 rounded-xl flex items-center justify-center group-hover:bg-green-600 group-hover:text-white transition-colors">
          <svg class="w-7 h-7" 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" />
          </svg>
        </div>
        <h3 class="mt-6 text-xl font-bold text-gray-900">Security</h3>
        <p class="mt-2 text-gray-600">
          Enterprise-grade security keeps your data reliably protected.
        </p>
      </div>

      <!-- Feature card 3 -->
      <div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
        <div class="w-14 h-14 bg-purple-100 text-purple-600 rounded-xl flex items-center justify-center group-hover:bg-purple-600 group-hover:text-white transition-colors">
          <svg class="w-7 h-7" 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" />
          </svg>
        </div>
        <h3 class="mt-6 text-xl font-bold text-gray-900">Team collaboration</h3>
        <p class="mt-2 text-gray-600">
          Work together in real time and boost productivity across the whole team.
        </p>
      </div>

      <!-- Feature card 4 -->
      <div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
        <div class="w-14 h-14 bg-yellow-100 text-yellow-600 rounded-xl flex items-center justify-center group-hover:bg-yellow-600 group-hover:text-white transition-colors">
          <svg class="w-7 h-7" 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>
        </div>
        <h3 class="mt-6 text-xl font-bold text-gray-900">Analytics dashboard</h3>
        <p class="mt-2 text-gray-600">
          Detailed analytics reports let you grasp your business at a glance.
        </p>
      </div>

      <!-- Feature card 5 -->
      <div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
        <div class="w-14 h-14 bg-red-100 text-red-600 rounded-xl flex items-center justify-center group-hover:bg-red-600 group-hover:text-white transition-colors">
          <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
          </svg>
        </div>
        <h3 class="mt-6 text-xl font-bold text-gray-900">Automatic sync</h3>
        <p class="mt-2 text-gray-600">
          Automatically syncs across all your devices, accessible anytime, anywhere.
        </p>
      </div>

      <!-- Feature card 6 -->
      <div class="group p-8 bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300">
        <div class="w-14 h-14 bg-indigo-100 text-indigo-600 rounded-xl flex items-center justify-center group-hover:bg-indigo-600 group-hover:text-white transition-colors">
          <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
          </svg>
        </div>
        <h3 class="mt-6 text-xl font-bold text-gray-900">API integration</h3>
        <p class="mt-2 text-gray-600">
          A rich set of APIs lets you integrate seamlessly with your existing tools.
        </p>
      </div>
    </div>
  </div>
</section>

Pricing section

<section class="py-20 md:py-28 bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <span class="text-blue-600 font-semibold uppercase tracking-wide">Pricing</span>
      <h2 class="mt-2 text-3xl md:text-4xl font-bold text-gray-900">
        Simple, transparent pricing
      </h2>
      <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
        No hidden fees. Choose a plan based on the features you need.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
      <!-- Starter plan -->
      <div class="bg-white rounded-2xl shadow-lg p-8">
        <h3 class="text-xl font-bold text-gray-900">Starter</h3>
        <p class="mt-2 text-gray-600">Ideal for personal use</p>
        <div class="mt-6">
          <span class="text-4xl font-bold">¥0</span>
          <span class="text-gray-500">/month</span>
        </div>
        <ul class="mt-8 space-y-4">
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-gray-600">Up to 5 projects</span>
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-gray-600">1GB storage</span>
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-gray-600">Community support</span>
          </li>
        </ul>
        <button class="mt-8 w-full py-3 px-4 border-2 border-blue-500 text-blue-500 font-semibold rounded-xl hover:bg-blue-50 transition-colors">
          Get started for free
        </button>
      </div>

      <!-- Pro plan (recommended) -->
      <div class="bg-blue-600 rounded-2xl shadow-xl p-8 relative">
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-yellow-400 text-yellow-900 text-sm font-semibold rounded-full">
          Popular
        </div>
        <h3 class="text-xl font-bold text-white">Pro</h3>
        <p class="mt-2 text-blue-100">For growing teams</p>
        <div class="mt-6">
          <span class="text-4xl font-bold text-white">¥2,980</span>
          <span class="text-blue-200">/month</span>
        </div>
        <ul class="mt-8 space-y-4">
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-blue-100">Unlimited projects</span>
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-blue-100">100GB storage</span>
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-blue-100">Priority support</span>
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-blue-200" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-blue-100">Advanced analytics</span>
          </li>
        </ul>
        <button class="mt-8 w-full py-3 px-4 bg-white text-blue-600 font-semibold rounded-xl hover:bg-blue-50 transition-colors">
          Choose this plan
        </button>
      </div>

      <!-- Enterprise -->
      <div class="bg-white rounded-2xl shadow-lg p-8">
        <h3 class="text-xl font-bold text-gray-900">Enterprise</h3>
        <p class="mt-2 text-gray-600">For large organizations</p>
        <div class="mt-6">
          <span class="text-4xl font-bold">Contact us</span>
        </div>
        <ul class="mt-8 space-y-4">
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-gray-600">All features</span>
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-gray-600">Unlimited storage</span>
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-gray-600">Dedicated support</span>
          </li>
          <li class="flex items-center gap-3">
            <svg class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
            <span class="text-gray-600">SLA guarantee</span>
          </li>
        </ul>
        <button class="mt-8 w-full py-3 px-4 border-2 border-blue-500 text-blue-500 font-semibold rounded-xl hover:bg-blue-50 transition-colors">
          Contact us
        </button>
      </div>
    </div>
  </div>
</section>

FAQ section

<section class="py-20 md:py-28 bg-white">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <span class="text-blue-600 font-semibold uppercase tracking-wide">FAQ</span>
      <h2 class="mt-2 text-3xl md:text-4xl font-bold text-gray-900">
        Frequently asked questions
      </h2>
    </div>

    <div class="space-y-4">
      <!-- FAQ item 1 -->
      <details class="group bg-gray-50 rounded-xl">
        <summary class="flex justify-between items-center p-6 cursor-pointer list-none">
          <span class="font-semibold text-gray-900">Is the free plan good enough on its own?</span>
          <svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </summary>
        <div class="px-6 pb-6 text-gray-600">
          Yes. For personal use, the free plan offers plenty of features. If you need team usage or advanced features, consider the Pro plan.
        </div>
      </details>

      <!-- FAQ item 2 -->
      <details class="group bg-gray-50 rounded-xl">
        <summary class="flex justify-between items-center p-6 cursor-pointer list-none">
          <span class="font-semibold text-gray-900">Can I cancel anytime?</span>
          <svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </summary>
        <div class="px-6 pb-6 text-gray-600">
          Yes, you can cancel at any time. Even after canceling, you can keep using the service until the end of your billing period. There are no cancellation fees.
        </div>
      </details>

      <!-- FAQ item 3 -->
      <details class="group bg-gray-50 rounded-xl">
        <summary class="flex justify-between items-center p-6 cursor-pointer list-none">
          <span class="font-semibold text-gray-900">Can I export my data?</span>
          <svg class="w-5 h-5 text-gray-500 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </summary>
        <div class="px-6 pb-6 text-gray-600">
          Yes, data export is available on every plan. You can export in CSV, JSON, and PDF formats.
        </div>
      </details>
    </div>
  </div>
</section>

CTA section

<section class="py-20 md:py-28 bg-linear-to-r from-blue-600 to-purple-600">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <h2 class="text-3xl md:text-4xl font-bold text-white">
      Get started today
    </h2>
    <p class="mt-4 text-lg text-blue-100">
      14-day free trial. No credit card required.
    </p>
    <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-blue-600 bg-white rounded-xl hover:bg-blue-50 transition-colors">
        Get started for free
      </a>
      <a href="#" class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white border-2 border-white/30 rounded-xl hover:bg-white/10 transition-colors">
        Talk to sales
      </a>
    </div>
  </div>
</section>

Footer

<footer class="bg-gray-900 text-white py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div class="col-span-2 md:col-span-1">
        <a href="/" class="text-2xl font-bold">Logo</a>
        <p class="mt-4 text-gray-400 text-sm">
          A next-generation platform to accelerate your business
        </p>
      </div>
      <div>
        <h4 class="font-semibold mb-4">Product</h4>
        <ul class="space-y-2 text-gray-400 text-sm">
          <li><a href="#" class="hover:text-white">Features</a></li>
          <li><a href="#" class="hover:text-white">Pricing</a></li>
          <li><a href="#" class="hover:text-white">Case studies</a></li>
        </ul>
      </div>
      <div>
        <h4 class="font-semibold mb-4">Support</h4>
        <ul class="space-y-2 text-gray-400 text-sm">
          <li><a href="#" class="hover:text-white">Help center</a></li>
          <li><a href="#" class="hover:text-white">Documentation</a></li>
          <li><a href="#" class="hover:text-white">Contact us</a></li>
        </ul>
      </div>
      <div>
        <h4 class="font-semibold mb-4">Company</h4>
        <ul class="space-y-2 text-gray-400 text-sm">
          <li><a href="#" class="hover:text-white">About us</a></li>
          <li><a href="#" class="hover:text-white">Careers</a></li>
          <li><a href="#" class="hover:text-white">Blog</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
      <p class="text-gray-400 text-sm">
        © 2026 Company Name. All rights reserved.
      </p>
      <div class="flex gap-6 mt-4 md:mt-0">
        <a href="#" class="text-gray-400 hover:text-white">
          <span class="sr-only">Twitter</span>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">...</svg>
        </a>
        <a href="#" class="text-gray-400 hover:text-white">
          <span class="sr-only">GitHub</span>
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">...</svg>
        </a>
      </div>
    </div>
  </div>
</footer>

Summary

What you learned in this project:

• Layout: flexible layouts using Flexbox / Grid
• Responsive: a mobile-first approach
• Color: using gradients and color palettes
• Typography: hierarchical text styling
• Interaction: hover effects and transitions
• Components: reusable UI patterns

You have now learned Tailwind CSS from the basics through to more advanced topics. Put this knowledge to use in your real projects.

What to read next

• Introduction to React — Tailwind — practical patterns for combining with React (clsx / variants / RSC)
• TypeScript Master Guide — raise quality with type-safe implementation
• Clean Code (TypeScript) — boost code quality with design standards
• Tailwind CSS Guide table of contents — back to the structure of all 18 chapters