From c6cad19c00ea9070937076a66c1cf0aa36a24345 Mon Sep 17 00:00:00 2001 From: root Date: Thu, 15 Jan 2026 14:14:10 +0300 Subject: [PATCH] Added tailerwindcss --- ...form with Bulma CSS.html => Bulma CSS.html | 0 README.md | 1174 ++++++++++++++- Tailwind CSS.html | 1270 +++++++++++++++++ 3 files changed, 2442 insertions(+), 2 deletions(-) rename Building a Social Media Platform with Bulma CSS.html => Bulma CSS.html (100%) create mode 100644 Tailwind CSS.html diff --git a/Building a Social Media Platform with Bulma CSS.html b/Bulma CSS.html similarity index 100% rename from Building a Social Media Platform with Bulma CSS.html rename to Bulma CSS.html diff --git a/README.md b/README.md index ef89bed..c6c05a9 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Building a Modern Social Media Platform with Bulma CSS +# Building a Modern Social Media Platform with Bulma CSS or Tailwindcss This guide will walk you through the process of transforming a basic HTML structure ([starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html)) into a fully styled modern social media platform ([index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/index.html)) using the Bulma CSS framework. @@ -422,4 +422,1174 @@ Throughout the project, you'll see various utility classes: ## Next Steps -Once you've successfully transformed your [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html) into the full featured [index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/index.html), consider exploring more Bulma components like modals, dropdowns, panels, and tabs to further enhance your social media platform. \ No newline at end of file +Once you've successfully transformed your [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/starter_index.html) into the full featured [index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/bulma_version/index.html), consider exploring more Bulma components like modals, dropdowns, panels, and tabs to further enhance your social media platform. + + +# Building a Social Media Interface with Tailwind CSS + +This guide will walk you through how to transform the basic HTML file ([starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/tailwindcss_version/starter_index.html)) into a modern, animated social media interface ([index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/tailwindcss_version/index.html)). We'll cover everything from basic HTML structure to CSS styling with Tailwind CSS and JavaScript functionality. + +## Table of Contents +1. [Prerequisites](#prerequisites) +2. [Understanding the Files](#understanding-the-files) +3. [What is Tailwind CSS?](#what-is-tailwind-css) +4. [Step-by-Step Transformation](#step-by-step-transformation) +5. [Key Tailwind CSS Classes Used](#key-tailwind-css-classes-used) +6. [Animations Explained](#animations-explained) +7. [Additional Features](#additional-features) +8. [Complete Code Examples](#complete-code-examples) +9. [Conclusion](#conclusion) + +## Prerequisites + +Before starting, you'll need: +- A text editor (like VSCode, Sublime Text, or Atom) +- A modern web browser (Yandex) +- Basic understanding that HTML creates structure, CSS adds styling, and JavaScript adds interactivity + +## Understanding the Files + +- **starter_index.html**: This is the basic HTML structure without styling - think of it as the skeleton +- **index.html**: This is the final product with Tailwind CSS styling, animations, and enhanced functionality + +## What is Tailwind CSS? + +Tailwind CSS is a utility-first CSS framework that allows you to style your HTML directly using class names. Instead of writing traditional CSS, you combine utility classes directly in your HTML to achieve the design you want. + +For example: +- Traditional CSS approach: Create a `.button` class in a separate CSS file with properties +- Tailwind approach: Apply classes directly like `` + +### Benefits of Tailwind CSS: +- Faster development +- Consistent design +- Highly customizable +- Responsive by default + +## Step-by-Step Transformation + +### Step 1: Setting up Tailwind CSS + +To use Tailwind CSS in your project, you need to include it via a CDN (Content Delivery Network). A CDN is a service that hosts files and delivers them to users quickly from locations near them. + +Add this script in the `` section of your HTML file: + +```html + +``` + +This line tells the browser to load Tailwind CSS from the internet when your page loads. + +### Step 2: Adding Meta Viewport Tag + +Include this tag in the `` section to ensure your design works well on mobile devices: + +```html + +``` + +### Step 3: Basic Structure + +Start with the standard HTML5 template: + +```html + + + + + + Your Page Title + + + + + + +``` + +### Step 4: Applying Tailwind CSS Classes + +Now we'll transform each section using Tailwind CSS classes: + +#### Navigation Bar +Original starter version: +```html + +``` + +Enhanced with Tailwind CSS: +```html + +``` + +**Explanation of Tailwind classes:** +- `bg-white`: Sets background color to white +- `shadow-md`: Adds medium shadow for depth +- `fixed top-0 left-0 w-full`: Makes navigation stick to top of screen +- `z-10`: Ensures navigation appears above other elements +- `max-w-7xl`: Limits width to extra-large size +- `mx-auto`: Centers the container horizontally +- `px-4`: Adds horizontal padding +- `flex justify-between`: Creates flexible layout with items spaced at edges +- `h-16`: Sets height to 4rem (64px) +- `items-center`: Vertically centers items + +### Step 5: Creating the Main Content Area + +Add responsive layouts using Tailwind's flexbox utilities: + +```html +
+
+ +
+ +
+ + +
+ +
+
+
+``` + +**Class explanations:** +- `pt-20`: Adds top padding (to account for fixed navigation) +- `flex flex-col lg:flex-row`: Stacks vertically on small screens, arranges horizontally on large screens +- `gap-6`: Adds space between elements +- `lg:w-1/4`: On large screens, takes 1/4 of available width +- `w-full`: Takes full width on smaller screens + +### Step 6: Adding Animations + +Create custom animations by defining keyframes in a style tag: + +```html + +``` + +Then apply these animations to elements: +```html +
+ +
+``` + +## Key Tailwind CSS Classes Used + +### Colors +- `bg-indigo-600`: Indigo background color +- `text-white`: White text color +- `text-gray-800`: Dark gray text + +### Spacing +- `p-5`: Padding on all sides +- `m-4`: Margin on all sides +- `mt-6`: Top margin +- `mb-4`: Bottom margin + +### Layout +- `flex`: Creates flexible container +- `grid`: Creates grid layout +- `w-full`: Full width +- `h-screen`: Full viewport height + +### Typography +- `font-bold`: Bold text +- `text-xl`: Extra large text +- `text-center`: Centered text + +### Borders & Effects +- `rounded-lg`: Rounded corners +- `shadow-lg`: Large shadow +- `border`: Adds border + +### Responsive Design +- `md:`: Styles applied on medium screens and larger +- `lg:`: Styles applied on large screens and larger +- `sm:flex`: Flex layout on small screens + +## Animations Explained + +### Fade In Animation +Gradually increases opacity from 0 to 1 while scaling up from 80% to 100%. Great for making elements appear smoothly. + +### Slide Up Animation +Moves elements upward from below their final position while rotating slightly for emphasis. Creates a dynamic entrance effect. + +### Float Animation +Gently moves elements up and down continuously. Good for highlighting important elements like avatars. + +### Pulse Animation +Gently scales elements and adds a growing/shrinking glow effect. Draws attention to interactive elements like buttons. + +## Additional Features + +### Professional Navigation +- Clean, text-only navigation links +- Consistent styling across desktop and mobile +- Hover effects for better user feedback + +### Responsive Design +- Adapts to different screen sizes +- Mobile-friendly navigation menu +- Properly spaced elements on all devices + +### Accessibility Considerations +- Semantic HTML structure +- Proper contrast ratios +- Keyboard navigable elements + +## Complete Code Examples + +### Starter Index HTML + +Here is the complete code for [starter_index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/tailwindcss_version/starter_index.html): + +```html + + + + + + Maxy - Social Platform + + + + + + +
+
+
+ +
+ +
+
+
+ JS +
+

John Smith

+

@johnsmith

+ +
+
+
+

Posts

+

245

+
+
+
+
+

Followers

+

1.2K

+
+
+
+
+

Following

+

562

+
+
+
+
+
+ + +
+ + +
+ +
+
+
+ +
+
+
+ + + +
+ +
+
+
+ +
+
+
+
+ BM +
+
+
+
+

+ Barbara Middleton +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros + lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris + sit amet dolor blandit rutrum. Nunc in tempus turpis. +
+ Like · Reply · 3 hrs +

+
+ +
+
+
+ SB +
+
+
+
+

+ Sean Brown +
+ Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque + habitant morbi tristique senectus et netus et malesuada fames ac + turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis + leo feugiat. +
+ Like · Reply · 2 hrs +

+
+ +
+
+
+ SJ +
+
+
+
+

+ Sarah Johnson +
+ Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem + cursus ullamcorper sit amet nec massa. +
+ Like · Reply · 1 hr +

+
+
+
+ +
+
+
+ MC +
+
+
+
+

+ Michael Chen +
+ Morbi vitae diam et purus tincidunt porttitor vel vitae augue. + Praesent malesuada metus sed pharetra euismod. Cras tellus odio, + tincidunt iaculis diam non, porta aliquet tortor. +
+ Like · Reply · 45 mins +

+
+
+
+
+
+ +
+
+
+ KE +
+
+
+
+

+ Kayli Eunice +
+ Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. + Maecenas varius felis sit amet magna vestibulum euismod malesuada + cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id + feugiat. +
+ Like · Reply · 2 hrs +

+
+
+
+
+
+ +
+
+
+ UU +
+
+
+
+

+ +

+
+
+

+ +

+
+
+
+
+
+ +
+
+
+ + + + + +``` + +### Final Index HTML + +Here is the complete code for [index.html](file:///Users/home/YandexDisk/TECHNOLYCEUM/ict/Year/2025/g11/G11M3-Web Development Frameworks/3.4 Sub-Project: CMS Website/g11-m3/tailwindcss_version/index.html): + +```html + + + + + + Maxy - Social Platform + + + + + + + + +
+
+ +
+ +
+
+
+ JS +
+

John Smith

+

@johnsmith

+ +
+
+

Posts

+

245

+
+
+

Followers

+

1.2K

+
+
+

Following

+

562

+
+
+
+
+
+ + +
+ +
+
+
+ +
+
+ +
+
+
+ + +
+ +
+
+
+
+ BM +
+
+
+
+

+ Barbara Middleton + @barbmiddle · 3 hrs +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros + lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris + sit amet dolor blandit rutrum. Nunc in tempus turpis. +

+ +
+ + Reply + + + Repost + + + Like + + + Share + +
+
+ + +
+ +
+
+
+
+ SB +
+
+
+

+ Sean Brown + @seanbrown · 2 hrs +

+

+ Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque + habitant morbi tristique senectus et netus et malesuada fames ac + turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis + leo feugiat. +

+ +
+ + Like + + + Reply + +
+
+
+ + +
+
+
+
+
+ SJ +
+
+
+

+ Sarah Johnson + @sarahj · 1 hr +

+

+ Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem + cursus ullamcorper sit amet nec massa. +

+ +
+ + Like + + + Reply + +
+
+
+
+
+
+ + +
+
+
+
+ MC +
+
+
+

+ Michael Chen + @mikechen · 45 mins +

+

+ Morbi vitae diam et purus tincidunt porttitor vel vitae augue. + Praesent malesuada metus sed pharetra euismod. Cras tellus odio, + tincidunt iaculis diam non, porta aliquet tortor. +

+ +
+ + Like + + + Reply + +
+
+
+
+
+
+
+
+ + +
+
+
+
+ KE +
+
+
+

+ Kayli Eunice + @kaylie · 2 hrs +

+

+ Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. + Maecenas varius felis sit amet magna vestibulum euismod malesuada + cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus + et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id + feugiat. +

+ +
+ + Reply + + + Repost + + + Like + + + Share + +
+
+
+
+ + +
+
+
+
+ JS +
+
+
+
+ +
+
+
+ @ # +
+ +
+
+
+
+
+
+
+
+ + + + + +``` + +## Conclusion + +By following these steps, you've transformed a basic HTML structure into a modern, responsive social media interface with Tailwind CSS. The key takeaways are: + +1. **CDNs** allow easy access to external libraries like Tailwind CSS +2. **Utility classes** in Tailwind CSS allow rapid styling directly in HTML +3. **Responsive prefixes** like `md:` and `lg:` enable adaptive designs +4. **Custom animations** can be added with CSS keyframes +5. **Consistent spacing and colors** create professional-looking interfaces + +Remember to always test your design on different screen sizes and browsers to ensure a great user experience! + +--- + +*This guide was created for students learning web development with Tailwind CSS. Practice by modifying colors, spacing, and animations to create your own unique designs.* \ No newline at end of file diff --git a/Tailwind CSS.html b/Tailwind CSS.html new file mode 100644 index 0000000..b66e21b --- /dev/null +++ b/Tailwind CSS.html @@ -0,0 +1,1270 @@ + + + + + + Building a Social Media Platform with Tailwind CSS + + + +
+ +
+
+

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. +
  2. Download and run the installer
    3. +
  3. Click "Next" through all the options (defaults are fine)
    4. +
  4. When finished, open PowerShell
    5. +
+
+
+

For Mac:

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

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. +
  2. Go to: https://gitea.techshare.cc/technolyceum/g11-m3
    3. +
  3. Login with your username (ask your teacher if you don't have one)
    4. +
+
+ +
+

Step 3: Use the Template

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

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. +
  2. Click it and copy the URL (should look like: https://gitea.techshare.cc/yourname/yourname-tailwind-project.git)
    3. +
+
+ +
+

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
+
+ +
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file