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.
+
+ 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.
+
+ 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.
+
+ 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.
+
+
+
+
+
+
+
+```
+
+## 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.