Build a Social Media Platform with Tailwind CSS

Slide 1 of 15
🌐

Maxy - Modern Social Platform

Transform basic HTML into a beautiful animated social media website

What You'll Build

A responsive social media platform with:

  • Animated navigation with floating effects
  • Responsive three-column layout
  • Interactive comment threads
  • Custom CSS animations

What is Tailwind CSS?

Slide 2 of 15
🎨

Tailwind CSS is a Utility-First Framework

Instead of writing traditional CSS in separate files, you use utility classes directly in your HTML.

Traditional CSS Approach:

/* In a CSS file */ .button { background: blue; color: white; padding: 10px 20px; border-radius: 5px; }
<!-- In HTML --> <button class="button">Click me</button>

Tailwind CSS Approach:

<!-- Everything in HTML --> <button class="bg-blue-500 text-white px-5 py-2 rounded-lg"> Click me </button>

Benefits of Tailwind CSS:

  • Faster development - No context switching between files
  • Consistent design - Built-in spacing and color systems
  • Highly customizable - Configure your design system
  • Responsive by default - Mobile-first approach

Step-by-Step Setup Guide

Slide 3 of 15
🔧

Before We Start - Install Git

We'll use Git to download our starter template. Follow these steps:

For Windows:

  1. Go to git-scm.com/download/win
  2. Download and run the installer
  3. Click "Next" through all the options (defaults are fine)
  4. When finished, open PowerShell

For Mac:

  1. Open Terminal (search in Spotlight)
  2. Type: git --version
  3. If Git is not installed, it will prompt you to install it
  4. Follow the installation instructions

Let's Test Git Installation:

git --version
# If installed correctly, you'll see something like: git version 2.45.0

Important: If you just installed Git on Windows, close and reopen PowerShell before continuing.

Create Your Project Folder

Slide 4 of 15
📁

Step 1: Open PowerShell/Terminal

Let's create a folder for our Tailwind CSS project:

# First, go to your Documents folder
cd documents

# Create a new folder with YOUR name (replace with your actual name)
mkdir yourname-tailwind-project

# Go into your new folder
cd yourname-tailwind-project

# Check where you are
pwd
# (Windows: use 'dir' to see files)

Always use YOUR ACTUAL NAME in the folder name! This helps your teacher identify your work.

Get the Starter Template

Slide 5 of 15
🚀

Step 2: Go to Gitea

Now we'll get our starter code from Gitea:

  1. Open your web browser
  2. Go to: https://gitea.techshare.cc/technolyceum/g11-m3
  3. Login with your username (ask your teacher if you don't have one)

Step 3: Use the Template

  1. Click "Use this template" button
  2. Name it: yourname-tailwind-project
  3. Choose "Tailwind CSS Project" from the dropdown
  4. Click "Create repository"

Make sure to choose the "Tailwind CSS Project" template, not the Bulma one!

Clone Your Template

Slide 6 of 15
📋

Step 4: Copy the Clone URL

After creating your repository:

  1. Look for a green button that says "Code" or "Clone"
  2. Click it and copy the URL (should look like: https://gitea.techshare.cc/yourname/yourname-tailwind-project.git)

Step 5: Go Back to PowerShell/Terminal

Make sure you're in your project folder, then:

# Clone your repository (replace URL with your actual URL)
git clone https://gitea.techshare.cc/yourname/yourname-tailwind-project.git

# Go into the cloned folder
cd yourname-tailwind-project

# See what files you have
ls
# (Windows: use 'dir' instead of 'ls')

Understanding Your Project Files

Slide 7 of 15
📄

Two Key HTML Files:

starter_index.html

The "Before" file

  • Basic HTML structure only
  • No styling classes
  • Plain text and elements
  • Think of this as the "skeleton"

index.html

The "After" file

  • Fully styled with Tailwind CSS
  • Beautiful animations
  • Responsive design
  • Interactive elements

Open Both Files:

Open both HTML files in your text editor. You'll see:

# starter_index.html has NO Tailwind classes
<nav>
<div>...</div>
</nav>

# index.html has MANY Tailwind classes
<nav class="bg-white shadow-md fixed top-0 left-0 w-full z-10">
...
</nav>

Step 1: Add Tailwind CSS to Your Project

Slide 8 of 15
🔗

Using CDN (Content Delivery Network)

Open starter_index.html and add these lines in the <head> section:

Before (starter_index.html):

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maxy - Social Platform</title>
</head>

After (add these lines):

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maxy - Social Platform</title>

<!-- TAILWIND CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>

What is a CDN?

A CDN (Content Delivery Network) hosts files and delivers them quickly from locations near users.

Advantages:

  • No need to download files
  • Fast loading from local servers
  • Always get the latest version

Step 2: Transform the Navigation

Slide 9 of 15
🧭

Before: Basic Navigation

Your starter navigation looks like this:

<nav>
<div>
<div>
<a href="#">
<div>M</div>
<span>Maxy</span>
</a>
</div>
</div>
</nav>

After: Tailwind Styled Navigation

Replace your <nav> with this (copy from index.html):

<nav class="bg-white shadow-md fixed top-0 left-0 w-full z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<a href="#" class="flex items-center">
<div class="bg-indigo-600 text-white font-bold text-xl w-10 h-10 rounded-lg flex items-center justify-center mr-2 animate-float">
M
</div>
<span class="text-xl font-bold text-gray-800">Maxy</span>
</a>
</div>
<!-- Mobile menu and desktop navigation -->
</div>
</div>
</nav>

Key Tailwind Classes Explained:

  • bg-white - White background
  • shadow-md - Medium shadow for depth
  • fixed top-0 left-0 w-full - Sticks to top of screen
  • flex justify-between - Space items at edges
  • animate-float - Custom floating animation

Step 3: Create Responsive Layout

Slide 10 of 15
📱

Before: Basic Layout

Simple section without responsive classes:

<section>
<div>
<div>
<!-- Left Sidebar -->
<div>...</div>
</div>
</div>
</section>

After: Tailwind Responsive Layout

Replace with this responsive structure:

<main class="pt-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Left Sidebar -->
<div class="lg:w-1/4 w-full">
<!-- Profile Card -->
</div>

<!-- Main Feed -->
<div class="lg:w-3/4 w-full">
<!-- Posts -->
</div>
</div>
</main>

Responsive Classes Explained:

  • flex flex-col lg:flex-row - Stack vertically on small screens, horizontal on large
  • lg:w-1/4 - Takes 25% width on large screens
  • lg:w-3/4 - Takes 75% width on large screens
  • w-full - Full width on small screens
  • gap-6 - Space between elements

Step 4: Style Profile Cards

Slide 11 of 15
🎴

Before: Plain Profile Card

Basic div structure without styling:

<div>
<div>
<div>JS</div>
<h2>John Smith</h2>
<p>@johnsmith</p>
</div>
</div>

After: Beautiful Tailwind Card

Replace with this styled card (from index.html):

<div class="bg-white rounded-xl shadow p-5 mb-6 animate-fadeIn">
<div class="flex flex-col items-center">
<div class="bg-indigo-100 text-indigo-800 font-bold text-xl w-24 h-24 rounded-full flex items-center justify-center mb-4 animate-float">
JS
</div>
<h2 class="text-xl font-bold text-gray-800">John Smith</h2>
<p class="text-gray-500">@johnsmith</p>

<div class="flex justify-between w-full mt-6">
<div class="text-center">
<p class="text-gray-600">Posts</p>
<p class="font-bold">245</p>
</div>
<!-- More stats -->
</div>
</div>
</div>

Card Styling Explained:

  • rounded-xl - Extra large rounded corners
  • shadow - Subtle shadow effect
  • animate-fadeIn - Custom fade-in animation
  • rounded-full - Perfect circle for avatar
  • flex justify-between - Space items evenly

Step 5: Add Custom Animations

Slide 12 of 15
✨

Custom CSS Animations

Add this <style> section inside your <head> (from index.html):

<style>
.comment-reply { transition: all 0.3s ease; }
.comment-reply:hover { margin-left: 10px; }

/* Animation keyframes */
.animate-fadeIn {
animation: fadeIn 1s ease-out;
}

.animate-slideUp {
animation: slideUp 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-float {
animation: float 3s ease-in-out infinite;
}

.animate-pulse-slow {
animation: pulse-slow 1.5s ease-in-out infinite alternate;
}

@keyframes fadeIn {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(50px) rotate(5deg);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0);
}
}

@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

@keyframes pulse-slow {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
}
100% {
transform: scale(1.1);
box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
}
}
</style>

Animations Explained:

  • Fade In: Elements appear smoothly
  • Slide Up: Elements slide up with rotation
  • Float: Gentle up-down movement
  • Pulse Slow: Gentle pulsing for buttons

Apply animations with classes: animate-fadeIn, animate-slideUp, etc.

Step 6: Style Buttons and Interactive Elements

Slide 13 of 15
🔘

Before: Plain Button

<button>Message</button>

After: Tailwind Styled Button

Beautiful animated button (from index.html):

<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg animate-pulse-slow">Message</button>

Button Classes Explained:

  • bg-indigo-600 - Indigo background color
  • hover:bg-indigo-700 - Darker on hover
  • text-white - White text
  • px-4 py-2 - Horizontal and vertical padding
  • rounded-lg - Large rounded corners
  • animate-pulse-slow - Gentle pulsing animation

Try Different Button Styles:

Tailwind has many color variants:

  • bg-blue-500 hover:bg-blue-600 - Blue button
  • bg-green-500 hover:bg-green-600 - Green button
  • bg-red-500 hover:bg-red-600 - Red button
  • rounded-full - Fully rounded (pill shape)

Step 7: Save Your Work to Gitea

Slide 14 of 15
💾

Once You're Done Customizing

Go back to PowerShell/Terminal and save your work:

# Make sure you're in your project folder
cd yourname-tailwind-project

# Check what files you changed
git status

# Add all your changes
git add .

# Commit with a message (describe what you did)
git commit -m "Added Tailwind CSS and styled the navigation"

# Push to Gitea
git push origin main

Check Your Work on Gitea

Go back to your browser and refresh your Gitea repository page. You should see your updated files!

Remember: Your teacher can see your beautiful social media platform on Gitea.

Your Challenges

Slide 15 of 15
🏆

Customize Your Platform

Now that you have the basics, make it your own!

Change the color scheme from indigo to blue, green, or purple
Add a dark mode toggle button
Create custom animations for hover effects
Add a notification badge with a red dot
Make the mobile menu actually work with JavaScript

Remember to git add, git commit, and git push after each change!

This saves your work and lets your teacher see your progress. Every time you make a change:

git add .
git commit -m "Description of what you changed"
git push origin main