Lecture 12: Web Development Series

Creating Responsive User Interfaces

Learn how to master modern layout components, spacing best practices, and mobile-friendly interfaces using pure Tailwind CSS utility classes and gradient aesthetics.

Explore Core Topics View Class Reference

3

Core Modules

100%

Gradient Design

Mobile

First Workflow

responsive-ui-demo.html
Responsive UI Showcase
Live Preview Active Grid

Flexbox & CSS Grid Integration

Combining container components for fluid, breakpoint-driven design.

Course Curriculum

Three Pillars of Responsive Design

Explore fundamental concepts taught in Lecture 12 to create seamless web applications across all screen resolutions.

Module 1

1. Combining Layout Components

Learn how to nest flex containers inside CSS grid layouts, organize sticky headers, sidebars, and main content regions seamlessly.

Study Layout Modules
Module 2

2. Alignment & Spacing Best Practices

Master padding scales, margin rhythms, gap properties, vertical center alignments, and visual whitespace balancing across UI components.

Study Spacing Rules
Module 3

3. Mobile-Friendly Interface Design

Implement mobile-first responsive breakpoints (sm:, md:, lg:), touch-friendly targets, and mobile dropdown menus.

Study Mobile First

Interactive Breakpoint Simulator

Resize your browser window to test screen responsiveness in real time!

Viewport: Mobile (<640px)
sm

Small Screens

Min-width: 640px

md

Medium Screens

Min-width: 768px

lg

Large Screens

Min-width: 1024px

xl

Extra Large

Min-width: 1280px

Exhaustive Learning Table

Complete Tailwind CSS Class Reference Table for Index Page

Exhaustive tabular analysis covering EVERY single Tailwind class (336 total) and custom scrollbar utility used on this page for student mastery.

# Class Name What? (CSS Property & Meaning) Why? (Educational Design Rationale)
1 -translate-x-1/2 Applies 2D transform translation ('-translate-x-1/2'). Used to center absolute elements precisely.
2 -translate-y-1/2 Applies 2D transform translation ('-translate-y-1/2'). Used to center absolute elements precisely.
3 absolute Sets CSS position property ('absolute'). Controls element positioning context for overlays, badges, and sticky headers.
4 animate-float Triggers keyframe animation loop ('animate-float'). Adds subtle visual movement to hero graphics and live indicators.
5 animate-ping Triggers keyframe animation loop ('animate-ping'). Adds subtle visual movement to hero graphics and live indicators.
6 animate-pulse-slow Triggers keyframe animation loop ('animate-pulse-slow'). Adds subtle visual movement to hero graphics and live indicators.
7 antialiased Enables font anti-aliasing (-webkit-font-smoothing: antialiased). Improves text rendering sharpness on high-res displays.
8 backdrop-blur-md Applies glassmorphism backdrop blur filter ('backdrop-blur-md'). Maintains text contrast on translucent headers over scrolling content.
9 backdrop-blur-sm Applies glassmorphism backdrop blur filter ('backdrop-blur-sm'). Maintains text contrast on translucent headers over scrolling content.
10 backdrop-blur-xl Applies glassmorphism backdrop blur filter ('backdrop-blur-xl'). Maintains text contrast on translucent headers over scrolling content.
11 bg-amber-500/80 Sets background color or opacity ('bg-amber-500/80'). Styles container surface colors in dark theme palette.
12 bg-clip-text Clips background fill to the shape of foreground text glyphs. Required to render gradient text headers.
13 bg-emerald-500/80 Sets background color or opacity ('bg-emerald-500/80'). Styles container surface colors in dark theme palette.
14 bg-gradient-to-b Sets background linear gradient direction ('bg-gradient-to-b'). Establishes direction for vibrant visual color transitions.
15 bg-gradient-to-r Sets background linear gradient direction ('bg-gradient-to-r'). Establishes direction for vibrant visual color transitions.
16 bg-gradient-to-t Sets background linear gradient direction ('bg-gradient-to-t'). Establishes direction for vibrant visual color transitions.
17 bg-gradient-to-tr Sets background linear gradient direction ('bg-gradient-to-tr'). Establishes direction for vibrant visual color transitions.
18 bg-indigo-900/60 Sets background color or opacity ('bg-indigo-900/60'). Styles container surface colors in dark theme palette.
19 bg-pink-500 Sets background color or opacity ('bg-pink-500'). Styles container surface colors in dark theme palette.
20 bg-pink-900/60 Sets background color or opacity ('bg-pink-900/60'). Styles container surface colors in dark theme palette.
21 bg-purple-900/60 Sets background color or opacity ('bg-purple-900/60'). Styles container surface colors in dark theme palette.
22 bg-red-500/80 Sets background color or opacity ('bg-red-500/80'). Styles container surface colors in dark theme palette.
23 bg-slate-800/80 Sets background color or opacity ('bg-slate-800/80'). Styles container surface colors in dark theme palette.
24 bg-slate-900 Sets background color or opacity ('bg-slate-900'). Styles container surface colors in dark theme palette.
25 bg-slate-900/80 Sets background color or opacity ('bg-slate-900/80'). Styles container surface colors in dark theme palette.
26 bg-slate-900/90 Sets background color or opacity ('bg-slate-900/90'). Styles container surface colors in dark theme palette.
27 bg-slate-900/95 Sets background color or opacity ('bg-slate-900/95'). Styles container surface colors in dark theme palette.
28 bg-slate-950 Sets background color or opacity ('bg-slate-950'). Styles container surface colors in dark theme palette.
29 bg-slate-950/80 Sets background color or opacity ('bg-slate-950/80'). Styles container surface colors in dark theme palette.
30 block Sets display property state ('block'). Shows or hides elements conditionally across device viewports.
31 blur-3xl Applies glassmorphism backdrop blur filter ('blur-3xl'). Maintains text contrast on translucent headers over scrolling content.
32 border Applies border lines, border colors, or row dividers ('border'). Creates visual structural section lines and card boundaries.
33 border-amber-500/30 Applies border lines, border colors, or row dividers ('border-amber-500/30'). Creates visual structural section lines and card boundaries.
34 border-b Applies border lines, border colors, or row dividers ('border-b'). Creates visual structural section lines and card boundaries.
35 border-indigo-500 Applies border lines, border colors, or row dividers ('border-indigo-500'). Creates visual structural section lines and card boundaries.
36 border-indigo-500/20 Applies border lines, border colors, or row dividers ('border-indigo-500/20'). Creates visual structural section lines and card boundaries.
37 border-indigo-500/30 Applies border lines, border colors, or row dividers ('border-indigo-500/30'). Creates visual structural section lines and card boundaries.
38 border-indigo-500/40 Applies border lines, border colors, or row dividers ('border-indigo-500/40'). Creates visual structural section lines and card boundaries.
39 border-pink-500 Applies border lines, border colors, or row dividers ('border-pink-500'). Creates visual structural section lines and card boundaries.
40 border-pink-500/20 Applies border lines, border colors, or row dividers ('border-pink-500/20'). Creates visual structural section lines and card boundaries.
41 border-pink-500/30 Applies border lines, border colors, or row dividers ('border-pink-500/30'). Creates visual structural section lines and card boundaries.
42 border-purple-500 Applies border lines, border colors, or row dividers ('border-purple-500'). Creates visual structural section lines and card boundaries.
43 border-purple-500/30 Applies border lines, border colors, or row dividers ('border-purple-500/30'). Creates visual structural section lines and card boundaries.
44 border-slate-700 Applies border lines, border colors, or row dividers ('border-slate-700'). Creates visual structural section lines and card boundaries.
45 border-slate-800 Applies border lines, border colors, or row dividers ('border-slate-800'). Creates visual structural section lines and card boundaries.
46 border-slate-800/80 Applies border lines, border colors, or row dividers ('border-slate-800/80'). Creates visual structural section lines and card boundaries.
47 border-t Applies border lines, border colors, or row dividers ('border-t'). Creates visual structural section lines and card boundaries.
48 border-y Applies border lines, border colors, or row dividers ('border-y'). Creates visual structural section lines and card boundaries.
49 bottom-4 Controls offset coordinates or z-index stacking ('bottom-4'). Positions floating badges and ensures sticky headers stay on top.
50 custom-scrollbar Custom CSS class styling Webkit scrollbar thumb with a vibrant 3-stop linear gradient (indigo to purple to pink) and dark track background. Applies theme-consistent gradient scrollbars to scrollable container elements.
51 duration-200 Controls CSS transition properties and timing ('duration-200'). Ensures smooth state changes when user hovers over controls.
52 duration-300 Controls CSS transition properties and timing ('duration-300'). Ensures smooth state changes when user hovers over controls.
53 duration-500 Controls CSS transition properties and timing ('duration-500'). Ensures smooth state changes when user hovers over controls.
54 flex Applies display: flex flexbox layout container. Enables 1D alignment of child elements along row or column axes.
55 flex-col Sets flex container direction ('flex-col'). Arranges child components vertically in columns or horizontally in rows.
56 flex-grow Sets flex item sizing behavior ('flex-grow'). Pushes elements to fill available space or prevents unwanted shrinking.
57 flex-wrap Tailwind CSS utility class 'flex-wrap'. Provides specialized utility styling for 'flex-wrap'.
58 focus:outline-none Applies 'outline-none' when element receives keyboard or click focus. Tailwind CSS utility class 'outline-none'. Enhances form field focus feedback and keyboard accessibility.
59 focus:ring-2 Applies 'ring-2' when element receives keyboard or click focus. Tailwind CSS utility class 'ring-2'. Enhances form field focus feedback and keyboard accessibility.
60 focus:ring-purple-500 Applies 'ring-purple-500' when element receives keyboard or click focus. Tailwind CSS utility class 'ring-purple-500'. Enhances form field focus feedback and keyboard accessibility.
61 font-black Sets font weight or font family ('font-black'). Emphasizes titles, bold headings, and monospaced code blocks.
62 font-bold Sets font weight or font family ('font-bold'). Emphasizes titles, bold headings, and monospaced code blocks.
63 font-extrabold Sets font weight or font family ('font-extrabold'). Emphasizes titles, bold headings, and monospaced code blocks.
64 font-medium Sets font weight or font family ('font-medium'). Emphasizes titles, bold headings, and monospaced code blocks.
65 font-mono Sets font weight or font family ('font-mono'). Emphasizes titles, bold headings, and monospaced code blocks.
66 font-normal Sets font weight or font family ('font-normal'). Emphasizes titles, bold headings, and monospaced code blocks.
67 font-sans Sets font weight or font family ('font-sans'). Emphasizes titles, bold headings, and monospaced code blocks.
68 font-semibold Sets font weight or font family ('font-semibold'). Emphasizes titles, bold headings, and monospaced code blocks.
69 from-amber-500 Defines gradient color stop point ('from-amber-500'). Specifies color tones for multi-stop background and text gradients.
70 from-emerald-500 Defines gradient color stop point ('from-emerald-500'). Specifies color tones for multi-stop background and text gradients.
71 from-indigo-300 Defines gradient color stop point ('from-indigo-300'). Specifies color tones for multi-stop background and text gradients.
72 from-indigo-400 Defines gradient color stop point ('from-indigo-400'). Specifies color tones for multi-stop background and text gradients.
73 from-indigo-500 Defines gradient color stop point ('from-indigo-500'). Specifies color tones for multi-stop background and text gradients.
74 from-indigo-500/10 Defines gradient color stop point ('from-indigo-500/10'). Specifies color tones for multi-stop background and text gradients.
75 from-indigo-500/20 Defines gradient color stop point ('from-indigo-500/20'). Specifies color tones for multi-stop background and text gradients.
76 from-indigo-500/40 Defines gradient color stop point ('from-indigo-500/40'). Specifies color tones for multi-stop background and text gradients.
77 from-indigo-600 Defines gradient color stop point ('from-indigo-600'). Specifies color tones for multi-stop background and text gradients.
78 from-indigo-600/20 Defines gradient color stop point ('from-indigo-600/20'). Specifies color tones for multi-stop background and text gradients.
79 from-indigo-600/30 Defines gradient color stop point ('from-indigo-600/30'). Specifies color tones for multi-stop background and text gradients.
80 from-indigo-950 Defines gradient color stop point ('from-indigo-950'). Specifies color tones for multi-stop background and text gradients.
81 from-pink-400 Defines gradient color stop point ('from-pink-400'). Specifies color tones for multi-stop background and text gradients.
82 from-pink-500 Defines gradient color stop point ('from-pink-500'). Specifies color tones for multi-stop background and text gradients.
83 from-pink-500/10 Defines gradient color stop point ('from-pink-500/10'). Specifies color tones for multi-stop background and text gradients.
84 from-pink-500/40 Defines gradient color stop point ('from-pink-500/40'). Specifies color tones for multi-stop background and text gradients.
85 from-pink-600 Defines gradient color stop point ('from-pink-600'). Specifies color tones for multi-stop background and text gradients.
86 from-purple-400 Defines gradient color stop point ('from-purple-400'). Specifies color tones for multi-stop background and text gradients.
87 from-purple-500 Defines gradient color stop point ('from-purple-500'). Specifies color tones for multi-stop background and text gradients.
88 from-purple-500/40 Defines gradient color stop point ('from-purple-500/40'). Specifies color tones for multi-stop background and text gradients.
89 from-purple-600 Defines gradient color stop point ('from-purple-600'). Specifies color tones for multi-stop background and text gradients.
90 from-slate-900 Defines gradient color stop point ('from-slate-900'). Specifies color tones for multi-stop background and text gradients.
91 from-slate-900/60 Defines gradient color stop point ('from-slate-900/60'). Specifies color tones for multi-stop background and text gradients.
92 from-slate-950 Defines gradient color stop point ('from-slate-950'). Specifies color tones for multi-stop background and text gradients.
93 gap-1 Defines grid/flex spacing gaps or vertical element stacks ('gap-1'). Enforces consistent whitespace rhythm between sibling elements.
94 gap-12 Defines grid/flex spacing gaps or vertical element stacks ('gap-12'). Enforces consistent whitespace rhythm between sibling elements.
95 gap-2 Defines grid/flex spacing gaps or vertical element stacks ('gap-2'). Enforces consistent whitespace rhythm between sibling elements.
96 gap-3 Defines grid/flex spacing gaps or vertical element stacks ('gap-3'). Enforces consistent whitespace rhythm between sibling elements.
97 gap-4 Defines grid/flex spacing gaps or vertical element stacks ('gap-4'). Enforces consistent whitespace rhythm between sibling elements.
98 gap-6 Defines grid/flex spacing gaps or vertical element stacks ('gap-6'). Enforces consistent whitespace rhythm between sibling elements.
99 gap-8 Defines grid/flex spacing gaps or vertical element stacks ('gap-8'). Enforces consistent whitespace rhythm between sibling elements.
100 grid Applies display: grid multi-column layout container. Enables 2D grid component placement across columns and rows.
101 grid-cols-1 Defines grid template column counts ('grid-cols-1'). Splits card grid layouts into multi-column responsive tracks.
102 grid-cols-3 Defines grid template column counts ('grid-cols-3'). Splits card grid layouts into multi-column responsive tracks.
103 group Tailwind CSS utility class 'group'. Provides specialized utility styling for 'group'.
104 group-hover:rotate-12 Triggers 'rotate-12' on child when parent '.group' element is hovered. Tailwind CSS utility class 'rotate-12'. Coordinates synchronized multi-element hover animations.
105 group-hover:scale-105 Triggers 'scale-105' on child when parent '.group' element is hovered. Tailwind CSS utility class 'scale-105'. Coordinates synchronized multi-element hover animations.
106 group-hover:scale-110 Triggers 'scale-110' on child when parent '.group' element is hovered. Tailwind CSS utility class 'scale-110'. Coordinates synchronized multi-element hover animations.
107 group-hover:text-amber-300 Triggers 'text-amber-300' on child when parent '.group' element is hovered. Sets text font size or color tone ('text-amber-300'). Coordinates synchronized multi-element hover animations.
108 group-hover:text-amber-400 Triggers 'text-amber-400' on child when parent '.group' element is hovered. Sets text font size or color tone ('text-amber-400'). Coordinates synchronized multi-element hover animations.
109 group-hover:text-indigo-400 Triggers 'text-indigo-400' on child when parent '.group' element is hovered. Sets text font size or color tone ('text-indigo-400'). Coordinates synchronized multi-element hover animations.
110 group-hover:text-pink-300 Triggers 'text-pink-300' on child when parent '.group' element is hovered. Sets text font size or color tone ('text-pink-300'). Coordinates synchronized multi-element hover animations.
111 group-hover:text-pink-400 Triggers 'text-pink-400' on child when parent '.group' element is hovered. Sets text font size or color tone ('text-pink-400'). Coordinates synchronized multi-element hover animations.
112 group-hover:translate-x-1 Triggers 'translate-x-1' on child when parent '.group' element is hovered. Applies 2D transform translation ('translate-x-1'). Coordinates synchronized multi-element hover animations.
113 h-10 Sets container height constraint 'h-10'. Controls vertical height bounds and scrolling triggers.
114 h-11 Sets container height constraint 'h-11'. Controls vertical height bounds and scrolling triggers.
115 h-14 Sets container height constraint 'h-14'. Controls vertical height bounds and scrolling triggers.
116 h-2 Sets container height constraint 'h-2'. Controls vertical height bounds and scrolling triggers.
117 h-20 Sets container height constraint 'h-20'. Controls vertical height bounds and scrolling triggers.
118 h-3 Sets container height constraint 'h-3'. Controls vertical height bounds and scrolling triggers.
119 h-4 Sets container height constraint 'h-4'. Controls vertical height bounds and scrolling triggers.
120 h-5 Sets container height constraint 'h-5'. Controls vertical height bounds and scrolling triggers.
121 h-6 Sets container height constraint 'h-6'. Controls vertical height bounds and scrolling triggers.
122 h-64 Sets container height constraint 'h-64'. Controls vertical height bounds and scrolling triggers.
123 h-8 Sets container height constraint 'h-8'. Controls vertical height bounds and scrolling triggers.
124 h-[600px] Sets container height constraint 'h-[600px]'. Controls vertical height bounds and scrolling triggers.
125 h-full Sets container height constraint 'h-full'. Controls vertical height bounds and scrolling triggers.
126 hidden Sets display property state ('hidden'). Shows or hides elements conditionally across device viewports.
127 hover:bg-gradient-to-r Triggers 'bg-gradient-to-r' on mouse hover state. Sets background linear gradient direction ('bg-gradient-to-r'). Provides interactive hover feedback to enhance user experience.
128 hover:bg-slate-800 Triggers 'bg-slate-800' on mouse hover state. Sets background color or opacity ('bg-slate-800'). Provides interactive hover feedback to enhance user experience.
129 hover:border-purple-500/50 Triggers 'border-purple-500/50' on mouse hover state. Applies border lines, border colors, or row dividers ('border-purple-500/50'). Provides interactive hover feedback to enhance user experience.
130 hover:from-indigo-500 Triggers 'from-indigo-500' on mouse hover state. Defines gradient color stop point ('from-indigo-500'). Provides interactive hover feedback to enhance user experience.
131 hover:from-indigo-600/30 Triggers 'from-indigo-600/30' on mouse hover state. Defines gradient color stop point ('from-indigo-600/30'). Provides interactive hover feedback to enhance user experience.
132 hover:from-pink-500 Triggers 'from-pink-500' on mouse hover state. Defines gradient color stop point ('from-pink-500'). Provides interactive hover feedback to enhance user experience.
133 hover:from-purple-500 Triggers 'from-purple-500' on mouse hover state. Defines gradient color stop point ('from-purple-500'). Provides interactive hover feedback to enhance user experience.
134 hover:from-slate-800 Triggers 'from-slate-800' on mouse hover state. Defines gradient color stop point ('from-slate-800'). Provides interactive hover feedback to enhance user experience.
135 hover:scale-105 Triggers 'scale-105' on mouse hover state. Tailwind CSS utility class 'scale-105'. Provides interactive hover feedback to enhance user experience.
136 hover:scale-[1.02] Triggers 'scale-[1.02]' on mouse hover state. Tailwind CSS utility class 'scale-[1.02]'. Provides interactive hover feedback to enhance user experience.
137 hover:shadow-purple-600/50 Triggers 'shadow-purple-600/50' on mouse hover state. Applies drop shadow depth filter ('shadow-purple-600/50'). Provides interactive hover feedback to enhance user experience.
138 hover:text-white Triggers 'text-white' on mouse hover state. Sets text font size or color tone ('text-white'). Provides interactive hover feedback to enhance user experience.
139 hover:to-amber-500 Triggers 'to-amber-500' on mouse hover state. Defines gradient color stop point ('to-amber-500'). Provides interactive hover feedback to enhance user experience.
140 hover:to-indigo-500 Triggers 'to-indigo-500' on mouse hover state. Defines gradient color stop point ('to-indigo-500'). Provides interactive hover feedback to enhance user experience.
141 hover:to-pink-500 Triggers 'to-pink-500' on mouse hover state. Defines gradient color stop point ('to-pink-500'). Provides interactive hover feedback to enhance user experience.
142 hover:to-purple-600/30 Triggers 'to-purple-600/30' on mouse hover state. Defines gradient color stop point ('to-purple-600/30'). Provides interactive hover feedback to enhance user experience.
143 hover:to-slate-700 Triggers 'to-slate-700' on mouse hover state. Defines gradient color stop point ('to-slate-700'). Provides interactive hover feedback to enhance user experience.
144 hover:via-amber-500 Triggers 'via-amber-500' on mouse hover state. Defines gradient color stop point ('via-amber-500'). Provides interactive hover feedback to enhance user experience.
145 hover:via-pink-500 Triggers 'via-pink-500' on mouse hover state. Defines gradient color stop point ('via-pink-500'). Provides interactive hover feedback to enhance user experience.
146 hover:via-purple-500 Triggers 'via-purple-500' on mouse hover state. Defines gradient color stop point ('via-purple-500'). Provides interactive hover feedback to enhance user experience.
147 inline-block Tailwind CSS utility class 'inline-block'. Provides specialized utility styling for 'inline-block'.
148 inline-flex Applies display: inline-flex flexbox layout container. Enables 1D alignment of child elements along row or column axes.
149 inset-0 Tailwind CSS utility class 'inset-0'. Provides specialized utility styling for 'inset-0'.
150 items-center Sets flex/grid alignment along main/cross axes ('items-center'). Positions icons, logos, and buttons precisely.
151 justify-between Sets flex/grid alignment along main/cross axes ('justify-between'). Positions icons, logos, and buttons precisely.
152 justify-center Sets flex/grid alignment along main/cross axes ('justify-center'). Positions icons, logos, and buttons precisely.
153 leading-relaxed Controls line-height spacing ('leading-relaxed'). Improves line spacing for multi-line headings and paragraph copy.
154 leading-tight Controls line-height spacing ('leading-tight'). Improves line spacing for multi-line headings and paragraph copy.
155 left-1/2 Controls offset coordinates or z-index stacking ('left-1/2'). Positions floating badges and ensures sticky headers stay on top.
156 left-4 Controls offset coordinates or z-index stacking ('left-4'). Positions floating badges and ensures sticky headers stay on top.
157 lg:block Applies 'block' only on lg screens (≥1024px). Sets display property state ('block'). Responsive layout adaptation: Shows or hides elements conditionally across device viewports.
158 lg:col-span-5 Applies 'col-span-5' only on lg screens (≥1024px). Sets grid item column span width ('col-span-5'). Responsive layout adaptation: Allocates column width proportions inside grid layouts.
159 lg:col-span-7 Applies 'col-span-7' only on lg screens (≥1024px). Sets grid item column span width ('col-span-7'). Responsive layout adaptation: Allocates column width proportions inside grid layouts.
160 lg:gap-2 Applies 'gap-2' only on lg screens (≥1024px). Defines grid/flex spacing gaps or vertical element stacks ('gap-2'). Responsive layout adaptation: Enforces consistent whitespace rhythm between sibling elements.
161 lg:grid-cols-12 Applies 'grid-cols-12' only on lg screens (≥1024px). Defines grid template column counts ('grid-cols-12'). Responsive layout adaptation: Splits card grid layouts into multi-column responsive tracks.
162 lg:grid-cols-4 Applies 'grid-cols-4' only on lg screens (≥1024px). Defines grid template column counts ('grid-cols-4'). Responsive layout adaptation: Splits card grid layouts into multi-column responsive tracks.
163 lg:hidden Applies 'hidden' only on lg screens (≥1024px). Sets display property state ('hidden'). Responsive layout adaptation: Shows or hides elements conditionally across device viewports.
164 lg:justify-start Applies 'justify-start' only on lg screens (≥1024px). Sets flex/grid alignment along main/cross axes ('justify-start'). Responsive layout adaptation: Positions icons, logos, and buttons precisely.
165 lg:mx-0 Applies 'mx-0' only on lg screens (≥1024px). Applies margin spacing rule 'mx-0'. Responsive layout adaptation: Controls external spacing between adjacent UI components.
166 lg:pb-28 Applies 'pb-28' only on lg screens (≥1024px). Applies padding spacing rule 'pb-28'. Responsive layout adaptation: Controls internal whitespace around element content.
167 lg:pt-20 Applies 'pt-20' only on lg screens (≥1024px). Applies padding spacing rule 'pt-20'. Responsive layout adaptation: Controls internal whitespace around element content.
168 lg:px-8 Applies 'px-8' only on lg screens (≥1024px). Applies padding spacing rule 'px-8'. Responsive layout adaptation: Controls internal whitespace around element content.
169 lg:text-6xl Applies 'text-6xl' only on lg screens (≥1024px). Sets text font size or color tone ('text-6xl'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
170 lg:text-left Applies 'text-left' only on lg screens (≥1024px). Sets text font size or color tone ('text-left'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
171 max-h-[500px] Sets container height constraint 'max-h-[500px]'. Controls vertical height bounds and scrolling triggers.
172 max-w-2xl Sets container width constraint 'max-w-2xl'. Maintains element sizing bounds across screen resolutions.
173 max-w-3xl Sets container width constraint 'max-w-3xl'. Maintains element sizing bounds across screen resolutions.
174 max-w-7xl Sets container width constraint 'max-w-7xl'. Maintains element sizing bounds across screen resolutions.
175 md:block Applies 'block' only on md screens (≥768px). Sets display property state ('block'). Responsive layout adaptation: Shows or hides elements conditionally across device viewports.
176 md:flex Applies 'flex' only on md screens (≥768px). Applies display: flex flexbox layout container. Responsive layout adaptation: Enables 1D alignment of child elements along row or column axes.
177 md:flex-row Applies 'flex-row' only on md screens (≥768px). Sets flex container direction ('flex-row'). Responsive layout adaptation: Arranges child components vertically in columns or horizontally in rows.
178 md:grid-cols-3 Applies 'grid-cols-3' only on md screens (≥768px). Defines grid template column counts ('grid-cols-3'). Responsive layout adaptation: Splits card grid layouts into multi-column responsive tracks.
179 md:hidden Applies 'hidden' only on md screens (≥768px). Sets display property state ('hidden'). Responsive layout adaptation: Shows or hides elements conditionally across device viewports.
180 md:text-left Applies 'text-left' only on md screens (≥768px). Sets text font size or color tone ('text-left'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
181 min-h-screen Sets container height constraint 'min-h-screen'. Controls vertical height bounds and scrolling triggers.
182 mx-auto Sets left and right margin to auto (margin-left: auto; margin-right: auto;). Centers fixed-width block containers horizontally on the screen.
183 object-cover Sets CSS object-fit to cover for images. Fills image containers without stretching or distorting aspect ratio.
184 overflow-hidden Controls content clipping and scroll behavior ('overflow-hidden'). Prevents layout breaking and enables custom scrollbars.
185 overflow-y-auto Controls content clipping and scroll behavior ('overflow-y-auto'). Prevents layout breaking and enables custom scrollbars.
186 p-0.5 Applies padding spacing rule 'p-0.5'. Controls internal whitespace around element content.
187 p-1 Applies padding spacing rule 'p-1'. Controls internal whitespace around element content.
188 p-2.5 Applies padding spacing rule 'p-2.5'. Controls internal whitespace around element content.
189 p-3 Applies padding spacing rule 'p-3'. Controls internal whitespace around element content.
190 p-4 Applies padding spacing rule 'p-4'. Controls internal whitespace around element content.
191 p-8 Applies padding spacing rule 'p-8'. Controls internal whitespace around element content.
192 pb-20 Applies padding spacing rule 'pb-20'. Controls internal whitespace around element content.
193 pb-6 Applies padding spacing rule 'pb-6'. Controls internal whitespace around element content.
194 pointer-events-none Sets pointer-events to none. Allows user mouse clicks to pass through decorative background glow shapes.
195 pt-12 Applies padding spacing rule 'pt-12'. Controls internal whitespace around element content.
196 pt-2 Applies padding spacing rule 'pt-2'. Controls internal whitespace around element content.
197 pt-3 Applies padding spacing rule 'pt-3'. Controls internal whitespace around element content.
198 pt-4 Applies padding spacing rule 'pt-4'. Controls internal whitespace around element content.
199 pt-6 Applies padding spacing rule 'pt-6'. Controls internal whitespace around element content.
200 px-2 Applies padding spacing rule 'px-2'. Controls internal whitespace around element content.
201 px-3 Applies padding spacing rule 'px-3'. Controls internal whitespace around element content.
202 px-4 Applies padding spacing rule 'px-4'. Controls internal whitespace around element content.
203 px-5 Applies padding spacing rule 'px-5'. Controls internal whitespace around element content.
204 px-8 Applies padding spacing rule 'px-8'. Controls internal whitespace around element content.
205 py-0.5 Applies padding spacing rule 'py-0.5'. Controls internal whitespace around element content.
206 py-1 Applies padding spacing rule 'py-1'. Controls internal whitespace around element content.
207 py-1.5 Applies padding spacing rule 'py-1.5'. Controls internal whitespace around element content.
208 py-16 Applies padding spacing rule 'py-16'. Controls internal whitespace around element content.
209 py-2 Applies padding spacing rule 'py-2'. Controls internal whitespace around element content.
210 py-2.5 Applies padding spacing rule 'py-2.5'. Controls internal whitespace around element content.
211 py-20 Applies padding spacing rule 'py-20'. Controls internal whitespace around element content.
212 py-3 Applies padding spacing rule 'py-3'. Controls internal whitespace around element content.
213 py-4 Applies padding spacing rule 'py-4'. Controls internal whitespace around element content.
214 relative Sets CSS position property ('relative'). Controls element positioning context for overlays, badges, and sticky headers.
215 right-4 Controls offset coordinates or z-index stacking ('right-4'). Positions floating badges and ensures sticky headers stay on top.
216 rounded Sets border radius curved corners ('rounded'). Softens card edges, badges, and buttons for modern aesthetic.
217 rounded-2xl Sets border radius curved corners ('rounded-2xl'). Softens card edges, badges, and buttons for modern aesthetic.
218 rounded-3xl Sets border radius curved corners ('rounded-3xl'). Softens card edges, badges, and buttons for modern aesthetic.
219 rounded-[10px] Sets border radius curved corners ('rounded-[10px]'). Softens card edges, badges, and buttons for modern aesthetic.
220 rounded-[15px] Sets border radius curved corners ('rounded-[15px]'). Softens card edges, badges, and buttons for modern aesthetic.
221 rounded-[23px] Sets border radius curved corners ('rounded-[23px]'). Softens card edges, badges, and buttons for modern aesthetic.
222 rounded-full Sets border radius curved corners ('rounded-full'). Softens card edges, badges, and buttons for modern aesthetic.
223 rounded-lg Sets border radius curved corners ('rounded-lg'). Softens card edges, badges, and buttons for modern aesthetic.
224 rounded-xl Sets border radius curved corners ('rounded-xl'). Softens card edges, badges, and buttons for modern aesthetic.
225 scroll-smooth Applies CSS scroll-behavior: smooth. Smoothly scrolls page when clicking anchor link targets.
226 selection:bg-pink-500 Sets user text highlight selection styles ('bg-pink-500'). Customizes brand appearance when students highlight text content.
227 selection:text-white Sets user text highlight selection styles ('text-white'). Customizes brand appearance when students highlight text content.
228 shadow-2xl Applies drop shadow depth filter ('shadow-2xl'). Generates glowing visual depth beneath cards and buttons.
229 shadow-indigo-500/20 Applies drop shadow depth filter ('shadow-indigo-500/20'). Generates glowing visual depth beneath cards and buttons.
230 shadow-indigo-600/30 Applies drop shadow depth filter ('shadow-indigo-600/30'). Generates glowing visual depth beneath cards and buttons.
231 shadow-indigo-950/40 Applies drop shadow depth filter ('shadow-indigo-950/40'). Generates glowing visual depth beneath cards and buttons.
232 shadow-inner Applies drop shadow depth filter ('shadow-inner'). Generates glowing visual depth beneath cards and buttons.
233 shadow-lg Applies drop shadow depth filter ('shadow-lg'). Generates glowing visual depth beneath cards and buttons.
234 shadow-md Applies drop shadow depth filter ('shadow-md'). Generates glowing visual depth beneath cards and buttons.
235 shadow-pink-600/30 Applies drop shadow depth filter ('shadow-pink-600/30'). Generates glowing visual depth beneath cards and buttons.
236 shadow-purple-500/30 Applies drop shadow depth filter ('shadow-purple-500/30'). Generates glowing visual depth beneath cards and buttons.
237 shadow-purple-600/30 Applies drop shadow depth filter ('shadow-purple-600/30'). Generates glowing visual depth beneath cards and buttons.
238 shadow-purple-950/60 Applies drop shadow depth filter ('shadow-purple-950/60'). Generates glowing visual depth beneath cards and buttons.
239 shadow-sm Applies drop shadow depth filter ('shadow-sm'). Generates glowing visual depth beneath cards and buttons.
240 shadow-xl Applies drop shadow depth filter ('shadow-xl'). Generates glowing visual depth beneath cards and buttons.
241 sm:block Applies 'block' only on sm screens (≥640px). Sets display property state ('block'). Responsive layout adaptation: Shows or hides elements conditionally across device viewports.
242 sm:flex-row Applies 'flex-row' only on sm screens (≥640px). Sets flex container direction ('flex-row'). Responsive layout adaptation: Arranges child components vertically in columns or horizontally in rows.
243 sm:grid-cols-2 Applies 'grid-cols-2' only on sm screens (≥640px). Defines grid template column counts ('grid-cols-2'). Responsive layout adaptation: Splits card grid layouts into multi-column responsive tracks.
244 sm:h-72 Applies 'h-72' only on sm screens (≥640px). Sets container height constraint 'h-72'. Responsive layout adaptation: Controls vertical height bounds and scrolling triggers.
245 sm:hidden Applies 'hidden' only on sm screens (≥640px). Sets display property state ('hidden'). Responsive layout adaptation: Shows or hides elements conditionally across device viewports.
246 sm:px-6 Applies 'px-6' only on sm screens (≥640px). Applies padding spacing rule 'px-6'. Responsive layout adaptation: Controls internal whitespace around element content.
247 sm:text-3xl Applies 'text-3xl' only on sm screens (≥640px). Sets text font size or color tone ('text-3xl'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
248 sm:text-4xl Applies 'text-4xl' only on sm screens (≥640px). Sets text font size or color tone ('text-4xl'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
249 sm:text-5xl Applies 'text-5xl' only on sm screens (≥640px). Sets text font size or color tone ('text-5xl'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
250 sm:text-base Applies 'text-base' only on sm screens (≥640px). Sets text font size or color tone ('text-base'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
251 sm:text-lg Applies 'text-lg' only on sm screens (≥640px). Sets text font size or color tone ('text-lg'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
252 sm:text-sm Applies 'text-sm' only on sm screens (≥640px). Sets text font size or color tone ('text-sm'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
253 sm:text-xl Applies 'text-xl' only on sm screens (≥640px). Sets text font size or color tone ('text-xl'). Responsive layout adaptation: Establishes readable typographic hierarchy and contrast.
254 sm:w-auto Applies 'w-auto' only on sm screens (≥640px). Sets container width constraint 'w-auto'. Responsive layout adaptation: Maintains element sizing bounds across screen resolutions.
255 space-y-12 Defines grid/flex spacing gaps or vertical element stacks ('space-y-12'). Enforces consistent whitespace rhythm between sibling elements.
256 space-y-2 Defines grid/flex spacing gaps or vertical element stacks ('space-y-2'). Enforces consistent whitespace rhythm between sibling elements.
257 space-y-3 Defines grid/flex spacing gaps or vertical element stacks ('space-y-3'). Enforces consistent whitespace rhythm between sibling elements.
258 space-y-4 Defines grid/flex spacing gaps or vertical element stacks ('space-y-4'). Enforces consistent whitespace rhythm between sibling elements.
259 space-y-6 Defines grid/flex spacing gaps or vertical element stacks ('space-y-6'). Enforces consistent whitespace rhythm between sibling elements.
260 space-y-8 Defines grid/flex spacing gaps or vertical element stacks ('space-y-8'). Enforces consistent whitespace rhythm between sibling elements.
261 sticky Sets CSS position property ('sticky'). Controls element positioning context for overlays, badges, and sticky headers.
262 text-2xl Sets text font size or color tone ('text-2xl'). Establishes readable typographic hierarchy and contrast.
263 text-3xl Sets text font size or color tone ('text-3xl'). Establishes readable typographic hierarchy and contrast.
264 text-4xl Sets text font size or color tone ('text-4xl'). Establishes readable typographic hierarchy and contrast.
265 text-[10px] Sets text font size or color tone ('text-[10px]'). Establishes readable typographic hierarchy and contrast.
266 text-[11px] Sets text font size or color tone ('text-[11px]'). Establishes readable typographic hierarchy and contrast.
267 text-amber-400 Sets text font size or color tone ('text-amber-400'). Establishes readable typographic hierarchy and contrast.
268 text-base Sets text font size or color tone ('text-base'). Establishes readable typographic hierarchy and contrast.
269 text-center Sets text font size or color tone ('text-center'). Establishes readable typographic hierarchy and contrast.
270 text-indigo-300 Sets text font size or color tone ('text-indigo-300'). Establishes readable typographic hierarchy and contrast.
271 text-indigo-400 Sets text font size or color tone ('text-indigo-400'). Establishes readable typographic hierarchy and contrast.
272 text-lg Sets text font size or color tone ('text-lg'). Establishes readable typographic hierarchy and contrast.
273 text-pink-300 Sets text font size or color tone ('text-pink-300'). Establishes readable typographic hierarchy and contrast.
274 text-pink-400 Sets text font size or color tone ('text-pink-400'). Establishes readable typographic hierarchy and contrast.
275 text-purple-300 Sets text font size or color tone ('text-purple-300'). Establishes readable typographic hierarchy and contrast.
276 text-purple-400 Sets text font size or color tone ('text-purple-400'). Establishes readable typographic hierarchy and contrast.
277 text-slate-100 Sets text font size or color tone ('text-slate-100'). Establishes readable typographic hierarchy and contrast.
278 text-slate-200 Sets text font size or color tone ('text-slate-200'). Establishes readable typographic hierarchy and contrast.
279 text-slate-300 Sets text font size or color tone ('text-slate-300'). Establishes readable typographic hierarchy and contrast.
280 text-slate-400 Sets text font size or color tone ('text-slate-400'). Establishes readable typographic hierarchy and contrast.
281 text-sm Sets text font size or color tone ('text-sm'). Establishes readable typographic hierarchy and contrast.
282 text-transparent Makes foreground text color transparent (color: transparent;). Allows background text gradients to show through text glyphs.
283 text-white Sets text font size or color tone ('text-white'). Establishes readable typographic hierarchy and contrast.
284 text-xl Sets text font size or color tone ('text-xl'). Establishes readable typographic hierarchy and contrast.
285 text-xs Sets text font size or color tone ('text-xs'). Establishes readable typographic hierarchy and contrast.
286 to-amber-300 Defines gradient color stop point ('to-amber-300'). Specifies color tones for multi-stop background and text gradients.
287 to-amber-500 Defines gradient color stop point ('to-amber-500'). Specifies color tones for multi-stop background and text gradients.
288 to-pink-400 Defines gradient color stop point ('to-pink-400'). Specifies color tones for multi-stop background and text gradients.
289 to-pink-500 Defines gradient color stop point ('to-pink-500'). Specifies color tones for multi-stop background and text gradients.
290 to-pink-500/10 Defines gradient color stop point ('to-pink-500/10'). Specifies color tones for multi-stop background and text gradients.
291 to-pink-600 Defines gradient color stop point ('to-pink-600'). Specifies color tones for multi-stop background and text gradients.
292 to-pink-600/20 Defines gradient color stop point ('to-pink-600/20'). Specifies color tones for multi-stop background and text gradients.
293 to-purple-400 Defines gradient color stop point ('to-purple-400'). Specifies color tones for multi-stop background and text gradients.
294 to-purple-500 Defines gradient color stop point ('to-purple-500'). Specifies color tones for multi-stop background and text gradients.
295 to-purple-500/10 Defines gradient color stop point ('to-purple-500/10'). Specifies color tones for multi-stop background and text gradients.
296 to-purple-500/20 Defines gradient color stop point ('to-purple-500/20'). Specifies color tones for multi-stop background and text gradients.
297 to-purple-600 Defines gradient color stop point ('to-purple-600'). Specifies color tones for multi-stop background and text gradients.
298 to-purple-600/30 Defines gradient color stop point ('to-purple-600/30'). Specifies color tones for multi-stop background and text gradients.
299 to-slate-800 Defines gradient color stop point ('to-slate-800'). Specifies color tones for multi-stop background and text gradients.
300 to-slate-900 Defines gradient color stop point ('to-slate-900'). Specifies color tones for multi-stop background and text gradients.
301 to-slate-950 Defines gradient color stop point ('to-slate-950'). Specifies color tones for multi-stop background and text gradients.
302 to-teal-500 Defines gradient color stop point ('to-teal-500'). Specifies color tones for multi-stop background and text gradients.
303 to-transparent Defines gradient color stop point ('to-transparent'). Specifies color tones for multi-stop background and text gradients.
304 top-0 Controls offset coordinates or z-index stacking ('top-0'). Positions floating badges and ensures sticky headers stay on top.
305 top-1/4 Controls offset coordinates or z-index stacking ('top-1/4'). Positions floating badges and ensures sticky headers stay on top.
306 tracking-tight Controls letter spacing / kerning ('tracking-tight'). Refines typography legibility for uppercase titles and badges.
307 tracking-wider Controls letter spacing / kerning ('tracking-wider'). Refines typography legibility for uppercase titles and badges.
308 tracking-widest Controls letter spacing / kerning ('tracking-widest'). Refines typography legibility for uppercase titles and badges.
309 transition-all Controls CSS transition properties and timing ('transition-all'). Ensures smooth state changes when user hovers over controls.
310 transition-colors Controls CSS transition properties and timing ('transition-colors'). Ensures smooth state changes when user hovers over controls.
311 transition-transform Controls CSS transition properties and timing ('transition-transform'). Ensures smooth state changes when user hovers over controls.
312 uppercase Applies text-transform rule 'uppercase'. Formats badge labels and category headers cleanly.
313 via-amber-500/20 Defines gradient color stop point ('via-amber-500/20'). Specifies color tones for multi-stop background and text gradients.
314 via-indigo-950/40 Defines gradient color stop point ('via-indigo-950/40'). Specifies color tones for multi-stop background and text gradients.
315 via-pink-500/20 Defines gradient color stop point ('via-pink-500/20'). Specifies color tones for multi-stop background and text gradients.
316 via-purple-300 Defines gradient color stop point ('via-purple-300'). Specifies color tones for multi-stop background and text gradients.
317 via-purple-500 Defines gradient color stop point ('via-purple-500'). Specifies color tones for multi-stop background and text gradients.
318 via-purple-500/10 Defines gradient color stop point ('via-purple-500/10'). Specifies color tones for multi-stop background and text gradients.
319 via-purple-500/20 Defines gradient color stop point ('via-purple-500/20'). Specifies color tones for multi-stop background and text gradients.
320 via-purple-600 Defines gradient color stop point ('via-purple-600'). Specifies color tones for multi-stop background and text gradients.
321 via-purple-600/20 Defines gradient color stop point ('via-purple-600/20'). Specifies color tones for multi-stop background and text gradients.
322 via-purple-950 Defines gradient color stop point ('via-purple-950'). Specifies color tones for multi-stop background and text gradients.
323 via-slate-900/40 Defines gradient color stop point ('via-slate-900/40'). Specifies color tones for multi-stop background and text gradients.
324 w-10 Sets container width constraint 'w-10'. Maintains element sizing bounds across screen resolutions.
325 w-11 Sets container width constraint 'w-11'. Maintains element sizing bounds across screen resolutions.
326 w-14 Sets container width constraint 'w-14'. Maintains element sizing bounds across screen resolutions.
327 w-2 Sets container width constraint 'w-2'. Maintains element sizing bounds across screen resolutions.
328 w-3 Sets container width constraint 'w-3'. Maintains element sizing bounds across screen resolutions.
329 w-4 Sets container width constraint 'w-4'. Maintains element sizing bounds across screen resolutions.
330 w-5 Sets container width constraint 'w-5'. Maintains element sizing bounds across screen resolutions.
331 w-6 Sets container width constraint 'w-6'. Maintains element sizing bounds across screen resolutions.
332 w-8 Sets container width constraint 'w-8'. Maintains element sizing bounds across screen resolutions.
333 w-[600px] Sets container width constraint 'w-[600px]'. Maintains element sizing bounds across screen resolutions.
334 w-full Sets container width constraint 'w-full'. Maintains element sizing bounds across screen resolutions.
335 z-10 Controls offset coordinates or z-index stacking ('z-10'). Positions floating badges and ensures sticky headers stay on top.
336 z-50 Controls offset coordinates or z-index stacking ('z-50'). Positions floating badges and ensures sticky headers stay on top.