ID: career-infoway-home
Learn Tailwind CSS Step-by-Step
Welcome to Class, Developers! This upgraded student module teaches Tailwind CSS from beginner to advanced level using easy English, visual examples, and many old CSS vs new Tailwind comparisons.
Open Training Tracks → Beginner Friendly Simple words and small examples.
Code Comparison Old CSS vs Tailwind side by side.
Advanced Topics Dark mode, custom config, components and production tips.
ID: career-infoway-syllabus Course Syllabus Dashboard Click any topic from the sidebar or cards below.
Module 1: Beginner Foundations 🚀 Introduction & Setup What Tailwind is and how to start
Module 1: Beginner Foundations ⚡ Utility First Workflow Old CSS vs Tailwind mindset
Module 1: Beginner Foundations 🎨 Typography & Colors Text size, weight, color and palettes
Module 1: Beginner Foundations 📐 Spacing & Box Model Padding, margin, width and height
Module 2: Intermediate UI 🎯 Hover, Focus & States Interactive buttons and form states
Module 2: Intermediate UI 🧱 Flexbox Essentials Horizontal and vertical alignment
Module 2: Intermediate UI 🔲 Grid Systems Card layouts and spans
Module 2: Intermediate UI 📱 Responsive Design Mobile first breakpoints
Module 2: Intermediate UI 🧾 Forms & Inputs Inputs, labels, validation UI
Module 3: Advanced UI 🧩 Reusable Components Buttons, cards, badges, alerts
Module 3: Advanced UI 🎬 Transitions & Animation Smooth motion and transforms
Module 3: Advanced UI 🌘 Dark Mode Setup Class-based dark mode patterns
Module 4: Advanced Tailwind 🛠️ Custom Theme Config Extend colors, spacing and fonts
Module 4: Advanced Tailwind 🏗️ Real Layout Patterns Navbar, hero, pricing and dashboard blocks
Module 4: Advanced Tailwind 🚀 Production & Performance Build workflow and best practices
🏗️ Practical Layout Examples Assessments 🧪 Mid-Term Practice Lab Small UI challenge
Assessments 🏆 Final Capstone Project Complete responsive landing page
Level: Module 1: Beginner Foundations Introduction & Setup What Tailwind is and how to start. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Study the comparison examples below, then practice by editing classes in your HTML.
Old CSS vs New Tailwind Examples
Add Tailwind CDN
Old CSS way: you create a custom class and write CSS separately.
<script src="https://cdn.tailwindcss.com"></script>Tailwind way: you write ready-made utility classes directly in HTML.
<script src="https://cdn.tailwindcss.com"></script>Live Preview Output
Preview area Output of the code will appear like this.
Simple Card
Old CSS way: you create a custom class and write CSS separately.
<div class="card">Hello</div>
.card{padding:24px;border-radius:16px;background:white;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="p-6 rounded-2xl bg-white">Hello</div>Live Preview Output
Preview Card This is how the card will look on website.
Level: Module 1: Beginner Foundations Utility First Workflow Old CSS vs Tailwind mindset. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Study the comparison examples below, then practice by editing classes in your HTML.
Old CSS vs New Tailwind Examples
Button
Old CSS way: you create a custom class and write CSS separately.
.btn{padding:10px 18px;background:#2563eb;color:#fff;border-radius:10px;}Tailwind way: you write ready-made utility classes directly in HTML.
<button class="px-5 py-2.5 bg-blue-600 text-white rounded-lg">Save</button>Live Preview Output
Submit Button
Card Shadow
Old CSS way: you create a custom class and write CSS separately.
.card{background:#fff;box-shadow:0 10px 20px #0002;border-radius:16px;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="bg-white shadow-xl rounded-2xl">...</div>Live Preview Output
Preview Card This is how the card will look on website.
Center Box
Old CSS way: you create a custom class and write CSS separately.
.box{display:flex;align-items:center;justify-content:center;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="flex items-center justify-center">...</div>Live Preview Output
Centered Item
Level: Module 1: Beginner Foundations Typography & Colors Text size, weight, color and palettes. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Small light text
Medium amber text
Big bold indigo text
Old CSS vs New Tailwind Examples
Heading
Old CSS way: you create a custom class and write CSS separately.
.title{font-size:36px;font-weight:800;color:#1e293b;}Tailwind way: you write ready-made utility classes directly in HTML.
<h1 class="text-4xl font-extrabold text-slate-800">Title</h1>Live Preview Output
Beautiful Main Heading
Paragraph
Old CSS way: you create a custom class and write CSS separately.
.text{font-size:14px;line-height:1.7;color:#64748b;}Tailwind way: you write ready-made utility classes directly in HTML.
<p class="text-sm leading-7 text-slate-500">Text</p>Live Preview Output
This paragraph uses comfortable line height and soft color, so users can read it easily.
Gradient Text
Old CSS way: you create a custom class and write CSS separately.
.brand{background:linear-gradient(...);-webkit-background-clip:text;color:transparent;}Tailwind way: you write ready-made utility classes directly in HTML.
<h2 class="bg-gradient-to-r from-indigo-600 to-pink-500 bg-clip-text text-transparent">Brand</h2>Live Preview Output
Gradient Text Preview Level: Module 1: Beginner Foundations Spacing & Box Model Padding, margin, width and height. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
class="p-6" means 24px padding
Old CSS vs New Tailwind Examples
Padding
Old CSS way: you create a custom class and write CSS separately.
.box{padding:24px;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="p-6">...</div>Live Preview Output
Box with padding inside
Margin Top
Old CSS way: you create a custom class and write CSS separately.
.section{margin-top:32px;}Tailwind way: you write ready-made utility classes directly in HTML.
<section class="mt-8">...</section>Live Preview Output
First Box
Second Box with top margin
Width
Old CSS way: you create a custom class and write CSS separately.
.panel{max-width:768px;margin:auto;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="max-w-3xl mx-auto">...</div>Live Preview Output
Responsive width box
Level: Module 2: Intermediate UI Hover, Focus & States Interactive buttons and form states. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Hover / Focus / Click Me
Old CSS vs New Tailwind Examples
Hover Button
Old CSS way: you create a custom class and write CSS separately.
.btn:hover{background:#1d4ed8;transform:scale(.98);}Tailwind way: you write ready-made utility classes directly in HTML.
.btn equivalent: <button class="hover:bg-blue-700 active:scale-95 transition">Live Preview Output
Submit Button
Focus Input
Old CSS way: you create a custom class and write CSS separately.
.input:focus{outline:0;box-shadow:0 0 0 4px #bfdbfe;}Tailwind way: you write ready-made utility classes directly in HTML.
<input class="focus:outline-none focus:ring-4 focus:ring-blue-200">
Disabled
Old CSS way: you create a custom class and write CSS separately.
.btn[disabled]{opacity:.5;cursor:not-allowed;}Tailwind way: you write ready-made utility classes directly in HTML.
<button class="disabled:opacity-50 disabled:cursor-not-allowed">Live Preview Output
Disabled Button Level: Module 2: Intermediate UI Flexbox Essentials Horizontal and vertical alignment. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Old CSS vs New Tailwind Examples
Navbar
Old CSS way: you create a custom class and write CSS separately.
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;}Tailwind way: you write ready-made utility classes directly in HTML.
<nav class="flex items-center justify-between gap-4">
Vertical Center
Old CSS way: you create a custom class and write CSS separately.
.wrap{display:flex;align-items:center;min-height:100vh;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="min-h-screen flex items-center">Live Preview Output
Centered Item
Stack On Mobile
Old CSS way: you create a custom class and write CSS separately.
.row{display:flex;flex-direction:column;}@media(min-width:640px){.row{flex-direction:row}}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="flex flex-col sm:flex-row"> Level: Module 2: Intermediate UI Grid Systems Card layouts and spans. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Old CSS vs New Tailwind Examples
Three Cards
Old CSS way: you create a custom class and write CSS separately.
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="grid gap-4 md:grid-cols-3">Live Preview Output
Preview Card This is how the card will look on website.
Feature Span
Old CSS way: you create a custom class and write CSS separately.
.feature{grid-column:span 2;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="md:col-span-2">Live Preview Output
Feature 1
Feature 2
Feature 3
Auto Layout
Old CSS way: you create a custom class and write CSS separately.
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">Live Preview Output
Feature 1
Feature 2
Feature 3
Level: Module 2: Intermediate UI Responsive Design Mobile first breakpoints. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Resize screen: base → sm → md → lg
Old CSS vs New Tailwind Examples
Mobile First
Old CSS way: you create a custom class and write CSS separately.
.title{font-size:24px;}@media(min-width:768px){.title{font-size:48px;}}Tailwind way: you write ready-made utility classes directly in HTML.
<h1 class="text-2xl md:text-5xl">Title</h1>Live Preview Output
Resize screen to see responsive changes
Hide/Show
Old CSS way: you create a custom class and write CSS separately.
.desktop{display:none;}@media(min-width:1024px){.desktop{display:block;}}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="hidden lg:block">Desktop</div>Live Preview Output
Resize screen to see responsive changes
Responsive Padding
Old CSS way: you create a custom class and write CSS separately.
.section{padding:16px;}@media(min-width:768px){.section{padding:48px;}}Tailwind way: you write ready-made utility classes directly in HTML.
<section class="p-4 md:p-12">Live Preview Output
Box with padding inside
Level: Module 2: Intermediate UI Forms & Inputs Inputs, labels, validation UI. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Old CSS vs New Tailwind Examples
Input
Old CSS way: you create a custom class and write CSS separately.
.input{border:1px solid #cbd5e1;padding:12px;border-radius:10px;}Tailwind way: you write ready-made utility classes directly in HTML.
<input class="w-full rounded-lg border border-slate-300 px-4 py-3">
Label
Old CSS way: you create a custom class and write CSS separately.
.label{font-size:12px;font-weight:700;color:#475569;}Tailwind way: you write ready-made utility classes directly in HTML.
<label class="text-xs font-bold text-slate-600">Email</label>
Error Text
Old CSS way: you create a custom class and write CSS separately.
.error{font-size:12px;color:#dc2626;margin-top:4px;}Tailwind way: you write ready-made utility classes directly in HTML.
<p class="mt-1 text-xs text-red-600">Required field</p> Level: Module 3: Advanced UI Reusable Components Buttons, cards, badges, alerts. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
New Reusable Card Build once, reuse everywhere.
Old CSS vs New Tailwind Examples
Badge
Old CSS way: you create a custom class and write CSS separately.
.badge{display:inline-flex;padding:4px 10px;border-radius:999px;background:#e0e7ff;color:#4338ca;}Tailwind way: you write ready-made utility classes directly in HTML.
<span class="inline-flex rounded-full bg-indigo-100 px-2.5 py-1 text-indigo-700">New</span>Live Preview Output
New Course
Alert
Old CSS way: you create a custom class and write CSS separately.
.alert{border-left:4px solid #2563eb;background:#eff6ff;padding:16px;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="border-l-4 border-blue-600 bg-blue-50 p-4">Info</div>Live Preview Output
Your profile is 80% complete.
Card Component
Old CSS way: you create a custom class and write CSS separately.
.card{padding:24px;background:white;border:1px solid #e2e8f0;border-radius:20px;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="rounded-2xl border border-slate-200 bg-white p-6">Live Preview Output
Preview Card This is how the card will look on website.
Level: Module 3: Advanced UI Transitions & Animation Smooth motion and transforms. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Old CSS vs New Tailwind Examples
Smooth Hover
Old CSS way: you create a custom class and write CSS separately.
.card{transition:.2s}.card:hover{transform:translateY(-4px);}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="transition hover:-translate-y-1">Live Preview Output
Hover this card
Rotate Icon
Old CSS way: you create a custom class and write CSS separately.
.icon:hover{transform:rotate(12deg);}Tailwind way: you write ready-made utility classes directly in HTML.
<span class="inline-block transition hover:rotate-12">★</span>Live Preview Output
Open ➜
Pulse
Old CSS way: you create a custom class and write CSS separately.
.dot{animation:pulse 2s infinite;}Tailwind way: you write ready-made utility classes directly in HTML.
<span class="animate-pulse">●</span> Level: Module 3: Advanced UI Dark Mode Setup Class-based dark mode patterns. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Use the top button to preview dark mode.
Old CSS vs New Tailwind Examples
Dark Card
Old CSS way: you create a custom class and write CSS separately.
.dark .card{background:#0f172a;color:white;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-white">Live Preview Output
Preview Card This is how the card will look on website.
Dark Border
Old CSS way: you create a custom class and write CSS separately.
.dark .box{border-color:#334155;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="border border-slate-200 dark:border-slate-700">Live Preview Output
Dark mode ready card Use top button to test.
Dark Text
Old CSS way: you create a custom class and write CSS separately.
.dark .muted{color:#94a3b8;}Tailwind way: you write ready-made utility classes directly in HTML.
<p class="text-slate-500 dark:text-slate-400">Muted</p>Live Preview Output
Dark mode ready card Use top button to test.
Level: Module 4: Advanced Tailwind Custom Theme Config Extend colors, spacing and fonts. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Study the comparison examples below, then practice by editing classes in your HTML.
Old CSS vs New Tailwind Examples
Config Color
Old CSS way: you create a custom class and write CSS separately.
colors:{brand:"#6D28D9"}Tailwind way: you write ready-made utility classes directly in HTML.
tailwind.config = { theme:{ extend:{ colors:{ brand:"#6D28D9" }}}}Live Preview Output
Custom design token preview
Use Custom Color
Old CSS way: you create a custom class and write CSS separately.
.btn{background:#6D28D9;}Tailwind way: you write ready-made utility classes directly in HTML.
<button class="bg-brand text-white">Brand Button</button>Live Preview Output
Custom design token preview
Arbitrary Value
Old CSS way: you create a custom class and write CSS separately.
.box{height:73px;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="h-[73px]">...</div>Live Preview Output
Custom design token preview
Level: Module 4: Advanced Tailwind Real Layout Patterns Navbar, hero, pricing and dashboard blocks. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Study the comparison examples below, then practice by editing classes in your HTML.
Old CSS vs New Tailwind Examples
Hero Section
Old CSS way: you create a custom class and write CSS separately.
.hero{padding:80px 24px;text-align:center;}Tailwind way: you write ready-made utility classes directly in HTML.
<section class="px-6 py-20 text-center">Live Preview Output
Build Modern Websites Learn Tailwind with real UI examples.
Start Learning
Pricing Card
Old CSS way: you create a custom class and write CSS separately.
.pricing{border:1px solid #ddd;border-radius:24px;padding:32px;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="rounded-3xl border p-8 shadow-sm">Live Preview Output
Preview Card This is how the card will look on website.
Dashboard Stat
Old CSS way: you create a custom class and write CSS separately.
.stat{display:flex;justify-content:space-between;padding:20px;}Tailwind way: you write ready-made utility classes directly in HTML.
<div class="flex items-center justify-between rounded-xl p-5"> Level: Module 4: Advanced Tailwind Production & Performance Build workflow and best practices. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Study the comparison examples below, then practice by editing classes in your HTML.
Old CSS vs New Tailwind Examples
Avoid Long Repeated Classes
Old CSS way: you create a custom class and write CSS separately.
Copy same classes everywhereTailwind way: you write ready-made utility classes directly in HTML.
Create component snippets or use framework componentsLive Preview Output
npm run build ✓ CSS optimized for production
Production Build
Old CSS way: you create a custom class and write CSS separately.
Use CDN for every production appTailwind way: you write ready-made utility classes directly in HTML.
Use Tailwind CLI/Vite/PostCSS build for productionLive Preview Output
npm run build ✓ CSS optimized for production
Content Scan
Old CSS way: you create a custom class and write CSS separately.
Ship all CSSTailwind way: you write ready-made utility classes directly in HTML.
Configure content paths so unused CSS is removedLive Preview Output
npm run build ✓ CSS optimized for production
Level: Assessments Mid-Term Practice Lab Small UI challenge. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Study the comparison examples below, then practice by editing classes in your HTML.
Old CSS vs New Tailwind Examples
Lab Task
Old CSS way: you create a custom class and write CSS separately.
Create CSS button, card and grid manuallyTailwind way: you write ready-made utility classes directly in HTML.
Recreate same UI using only Tailwind utilitiesLive Preview Output
Student Task Preview Create this type of responsive component and submit your code.
Requirement
Old CSS way: you create a custom class and write CSS separately.
Mobile broken layoutTailwind way: you write ready-made utility classes directly in HTML.
Use sm:, md:, lg: breakpointsLive Preview Output
Student Task Preview Create this type of responsive component and submit your code.
Check
Old CSS way: you create a custom class and write CSS separately.
Only visual checkTailwind way: you write ready-made utility classes directly in HTML.
Check spacing, states, accessibility and responsivenessLive Preview Output
Student Task Preview Create this type of responsive component and submit your code.
Level: Assessments Final Capstone Project Complete responsive landing page. Read the simple explanation, compare old CSS with Tailwind, then practice the same idea in your own project.
Easy meaning: Tailwind gives small ready-made classes. Instead of writing separate CSS every time, you combine classes like building blocks.
Study the comparison examples below, then practice by editing classes in your HTML.
Old CSS vs New Tailwind Examples
Capstone
Old CSS way: you create a custom class and write CSS separately.
One static desktop pageTailwind way: you write ready-made utility classes directly in HTML.
Responsive landing page with hero, features, pricing, FAQ and footerLive Preview Output
Build Modern Websites Learn Tailwind with real UI examples.
Start Learning
Advanced Requirement
Old CSS way: you create a custom class and write CSS separately.
No dark modeTailwind way: you write ready-made utility classes directly in HTML.
Add dark mode classes and toggleLive Preview Output
Student Task Preview Create this type of responsive component and submit your code.
Submission
Old CSS way: you create a custom class and write CSS separately.
Screenshot onlyTailwind way: you write ready-made utility classes directly in HTML.
Submit HTML file plus notes explaining important classesLive Preview Output
Student Task Preview Create this type of responsive component and submit your code.
Level: Practical Website Blocks
Real Website Layout Examples: Old CSS vs New Tailwind CSS
This final practical section teaches common real-world layouts. Use the toggle switch to compare the old custom CSS method with the new Tailwind utility-class method. Use the tabs to switch between HTML code and CSS code.
Easy meaning: Old CSS needs separate class names and a separate stylesheet. Tailwind CSS keeps most design decisions inside the HTML using small readable classes like grid, gap-4, rounded-2xl, and md:grid-cols-3.
Responsive Gallery Layout
Learn how to build image/gallery grids for portfolio, product showcase, or media pages.
Old CSS
New Tailwind
HTML Code
CSS
<section class="gallery-section">
<h2>Our Creative Gallery</h2>
<div class="gallery-grid">
<img src="image-1.jpg" alt="Gallery image">
<img src="image-2.jpg" alt="Gallery image">
<img src="image-3.jpg" alt="Gallery image">
<img src="image-4.jpg" alt="Gallery image">
</div>
</section>.gallery-section {
padding: 60px 20px;
background: #f8fafc;
}
.gallery-section h2 {
font-size: 32px;
font-weight: 800;
text-align: center;
margin-bottom: 30px;
}
.gallery-grid {
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.gallery-grid img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 18px;
box-shadow: 0 10px 25px rgba(15, 23, 42, .12);
}
@media (max-width: 768px) {
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.gallery-grid { grid-template-columns: 1fr; }
}<section class="bg-slate-50 px-5 py-16">
<h2 class="mb-8 text-center text-3xl font-extrabold text-slate-900">
Our Creative Gallery
</h2>
<div class="mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<img class="h-56 w-full rounded-2xl object-cover shadow-lg" src="image-1.jpg" alt="Gallery image">
<img class="h-56 w-full rounded-2xl object-cover shadow-lg" src="image-2.jpg" alt="Gallery image">
<img class="h-56 w-full rounded-2xl object-cover shadow-lg" src="image-3.jpg" alt="Gallery image">
<img class="h-56 w-full rounded-2xl object-cover shadow-lg" src="image-4.jpg" alt="Gallery image">
</div>
</section>/* No custom CSS required. Tailwind classes handle spacing, grid, radius, shadow, and responsive columns. */
Live Preview Output
Preview
Modern Hero Section Layout
Hero sections are used at the top of landing pages to explain the main offer quickly.
Old CSS
New Tailwind
HTML Code
CSS
<section class="hero">
<div class="hero-content">
<span class="badge">New Course</span>
<h1>Master Tailwind CSS Faster</h1>
<p>Build responsive websites with clean utility classes and modern UI patterns.</p>
<a href="#" class="btn-primary">Start Learning</a>
</div>
<div class="hero-card">Live Preview</div>
</section>.hero {
min-height: 640px;
padding: 80px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
background: linear-gradient(135deg, #4f46e5, #1e1b4b);
color: white;
}
.hero-content { max-width: 560px; }
.badge {
display: inline-block;
background: rgba(255,255,255,.16);
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.hero h1 { font-size: 56px; line-height: 1; margin: 20px 0; }
.hero p { font-size: 18px; color: #c7d2fe; }
.btn-primary {
display: inline-block;
margin-top: 24px;
padding: 14px 22px;
background: white;
color: #4f46e5;
border-radius: 14px;
font-weight: 800;
}
.hero-card {
width: 380px;
min-height: 260px;
border-radius: 28px;
background: white;
color: #111827;
display: grid;
place-items: center;
}
@media(max-width: 900px) { .hero { flex-direction: column; text-align: center; } }<section class="bg-gradient-to-br from-indigo-600 to-indigo-950 px-6 py-20 text-white">
<div class="mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2">
<div>
<span class="inline-flex rounded-full bg-white/15 px-3 py-2 text-xs font-bold">
New Course
</span>
<h1 class="mt-5 text-4xl font-black leading-tight sm:text-5xl lg:text-6xl">
Master Tailwind CSS Faster
</h1>
<p class="mt-5 text-lg text-indigo-100">
Build responsive websites with clean utility classes and modern UI patterns.
</p>
<a class="mt-8 inline-flex rounded-xl bg-white px-6 py-3 font-extrabold text-indigo-600 shadow-lg" href="#">
Start Learning
</a>
</div>
<div class="grid min-h-72 place-items-center rounded-[2rem] bg-white p-8 text-slate-900 shadow-2xl">
Live Preview
</div>
</div>
</section>/* No custom CSS required. Gradient, grid, spacing, responsive text, button and card styles are all Tailwind utilities. */
Live Preview Output
Preview
Testimonial Cards Layout
Testimonials build trust. This layout is useful for course websites, service websites, and SaaS pages.
Old CSS
New Tailwind
HTML Code
CSS
<section class="testimonials">
<h2>What Students Say</h2>
<div class="testimonial-grid">
<article class="review-card"><p>Tailwind became easy for me.</p><strong>- Riya</strong></article>
<article class="review-card"><p>Examples helped me understand faster.</p><strong>- Dev</strong></article>
<article class="review-card"><p>Now I can build responsive UI.</p><strong>- Arjun</strong></article>
</div>
</section>.testimonials {
padding: 70px 20px;
background: #ffffff;
}
.testimonials h2 {
text-align: center;
font-size: 34px;
margin-bottom: 32px;
}
.testimonial-grid {
max-width: 1100px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.review-card {
padding: 26px;
border: 1px solid #e2e8f0;
border-radius: 22px;
box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
.review-card p { color: #475569; line-height: 1.7; }
.review-card strong { display:block; margin-top:16px; }
@media(max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } }<section class="bg-white px-5 py-16">
<h2 class="mb-8 text-center text-3xl font-black text-slate-900">
What Students Say
</h2>
<div class="mx-auto grid max-w-6xl gap-5 md:grid-cols-3">
<article class="rounded-2xl border border-slate-200 p-6 shadow-lg">
<p class="leading-7 text-slate-600">Tailwind became easy for me.</p>
<strong class="mt-4 block text-slate-900">- Riya</strong>
</article>
<article class="rounded-2xl border border-slate-200 p-6 shadow-lg">
<p class="leading-7 text-slate-600">Examples helped me understand faster.</p>
<strong class="mt-4 block text-slate-900">- Dev</strong>
</article>
<article class="rounded-2xl border border-slate-200 p-6 shadow-lg">
<p class="leading-7 text-slate-600">Now I can build responsive UI.</p>
<strong class="mt-4 block text-slate-900">- Arjun</strong>
</article>
</div>
</section>/* No custom CSS required. Use md:grid-cols-3 for desktop and default single column for mobile. */
Live Preview Output
Preview
Product Details Page Layout
A product page usually needs image gallery, price, features, quantity, and add-to-cart button.
Old CSS
New Tailwind
HTML Code
CSS
<main class="product-page">
<div class="product-image">Product Image</div>
<div class="product-info">
<p class="category">Premium Template</p>
<h1>Tailwind UI Kit</h1>
<p class="price">₹2,999</p>
<p class="description">A ready-to-use UI kit for modern websites.</p>
<button class="cart-btn">Add to Cart</button>
</div>
</main>.product-page {
max-width: 1180px;
margin: auto;
padding: 60px 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.product-image {
min-height: 480px;
border-radius: 28px;
background: #eef2ff;
display: grid;
place-items: center;
font-weight: 800;
}
.category { color: #4f46e5; font-weight: 800; text-transform: uppercase; font-size: 12px; }
.product-info h1 { font-size: 46px; margin: 12px 0; }
.price { font-size: 28px; font-weight: 900; }
.description { color: #64748b; line-height: 1.8; }
.cart-btn {
margin-top: 24px;
width: 100%;
border: 0;
border-radius: 16px;
padding: 16px;
background: #4f46e5;
color: white;
font-weight: 900;
}
@media(max-width: 900px) { .product-page { grid-template-columns: 1fr; } }<main class="mx-auto grid max-w-6xl gap-10 px-6 py-16 lg:grid-cols-2">
<div class="grid min-h-[480px] place-items-center rounded-[1.75rem] bg-indigo-50 font-extrabold text-indigo-700">
Product Image
</div>
<div class="flex flex-col justify-center">
<p class="text-xs font-extrabold uppercase tracking-wider text-indigo-600">Premium Template</p>
<h1 class="mt-3 text-4xl font-black text-slate-900 lg:text-5xl">Tailwind UI Kit</h1>
<p class="mt-4 text-3xl font-black text-slate-900">₹2,999</p>
<p class="mt-4 leading-8 text-slate-500">A ready-to-use UI kit for modern websites.</p>
<button class="mt-7 w-full rounded-2xl bg-indigo-600 px-6 py-4 font-black text-white shadow-lg hover:bg-indigo-700">
Add to Cart
</button>
</div>
</main>/* No custom CSS required. lg:grid-cols-2 creates two columns only on large screens. */
Live Preview Output
📦
Premium UI Kit
Tailwind Components Pack Ready sections for ecommerce and landing pages.
₹2,999
Add to Cart
Complete Landing Page Layout
This combines navbar, hero, feature cards, testimonials, CTA, and footer in one real page example.
Old CSS
New Tailwind
HTML Code
CSS
<div class="page">
<nav class="navbar"><strong>Career Infoway</strong><a>Home</a><a>Course</a><a>Contact</a></nav>
<section class="main-hero"><h1>Become a Frontend Developer</h1><p>Learn HTML, CSS, Tailwind and responsive design.</p><button>Join Now</button></section>
<section class="features"><div>Fast Learning</div><div>Live Projects</div><div>Certificate</div></section>
<footer class="footer">Copyright By Career Infoway</footer>
</div>.navbar {
height: 70px;
padding: 0 40px;
display: flex;
align-items: center;
gap: 24px;
border-bottom: 1px solid #e2e8f0;
}
.navbar strong { margin-right: auto; }
.main-hero {
padding: 100px 24px;
text-align: center;
background: #f8fafc;
}
.main-hero h1 { font-size: 54px; margin-bottom: 16px; }
.main-hero p { color: #64748b; font-size: 18px; }
.main-hero button {
margin-top: 28px;
padding: 15px 26px;
border: none;
border-radius: 14px;
background: #4f46e5;
color: white;
font-weight: 900;
}
.features {
max-width: 1100px;
margin: auto;
padding: 60px 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.features div { padding: 30px; border-radius: 20px; background: white; box-shadow: 0 10px 30px rgba(15,23,42,.08); }
.footer { padding: 30px; text-align:center; background:#0f172a; color:white; }
@media(max-width: 768px) { .features { grid-template-columns: 1fr; } .navbar a { display:none; } }<div class="min-h-screen bg-white text-slate-900">
<nav class="flex h-16 items-center gap-6 border-b border-slate-200 px-6">
<strong class="mr-auto text-lg font-black">Career Infoway</strong>
<a class="hidden text-sm font-semibold md:block" href="#">Home</a>
<a class="hidden text-sm font-semibold md:block" href="#">Course</a>
<a class="hidden text-sm font-semibold md:block" href="#">Contact</a>
</nav>
<section class="bg-slate-50 px-6 py-24 text-center">
<h1 class="mx-auto max-w-3xl text-4xl font-black leading-tight sm:text-6xl">
Become a Frontend Developer
</h1>
<p class="mx-auto mt-5 max-w-2xl text-lg text-slate-500">
Learn HTML, CSS, Tailwind and responsive design.
</p>
<button class="mt-8 rounded-xl bg-indigo-600 px-7 py-4 font-black text-white shadow-lg hover:bg-indigo-700">
Join Now
</button>
</section>
<section class="mx-auto grid max-w-6xl gap-5 px-6 py-16 md:grid-cols-3">
<div class="rounded-2xl bg-white p-8 shadow-lg">Fast Learning</div>
<div class="rounded-2xl bg-white p-8 shadow-lg">Live Projects</div>
<div class="rounded-2xl bg-white p-8 shadow-lg">Certificate</div>
</section>
<footer class="bg-slate-950 px-6 py-8 text-center text-white">
Copyright By Career Infoway
</footer>
</div>/* No custom CSS required. This full page is created using only Tailwind utility classes. */
Live Preview Output
Career Infoway Home Course Become a Frontend Developer Learn with practical examples.
Join Now Fast Learning
Live Projects
Certificate
Copyright By Career Infoway 2026