Meet The Instructors
About Our UI Design Team
We are passionate frontend educators dedicated to teaching students how to combine layout components, align elements precisely, and design mobile-first web interfaces.
Our Pedagogy
Three Core Teaching Values
1. Mobile-First Mindset
Always design for touch devices first before introducing breakpoint expansions for tablets and widescreen desktop displays.
2. Pixel Alignment & Whitespace
Enforce strict margin and padding scales to avoid arbitrary spacing values and maintain harmonic visual balance.
3. Component Composition
Combine reusable flex container items into cohesive grid cards, navbars, hero sections, and data tables.
Faculty Directory
Meet Our Course Instructors
Industry leaders in responsive design, CSS frameworks, accessibility, and modern UI engineering.
Exhaustive Learning Table
Complete Tailwind CSS Class Reference Table for About Us Page
Exhaustive tabular analysis covering EVERY single Tailwind class (228 total) and custom scrollbar utility used on this page for student mastery.
| # | Class Name | What? (CSS Property & Meaning) | Why? (Educational Design Rationale) |
|---|---|---|---|
| 1 | absolute | Sets CSS position property ('absolute'). | Controls element positioning context for overlays, badges, and sticky headers. |
| 2 | antialiased | Enables font anti-aliasing (-webkit-font-smoothing: antialiased). | Improves text rendering sharpness on high-res displays. |
| 3 | backdrop-blur-md | Applies glassmorphism backdrop blur filter ('backdrop-blur-md'). | Maintains text contrast on translucent headers over scrolling content. |
| 4 | backdrop-blur-xl | Applies glassmorphism backdrop blur filter ('backdrop-blur-xl'). | Maintains text contrast on translucent headers over scrolling content. |
| 5 | bg-amber-950 | Sets background color or opacity ('bg-amber-950'). | Styles container surface colors in dark theme palette. |
| 6 | bg-clip-text | Clips background fill to the shape of foreground text glyphs. | Required to render gradient text headers. |
| 7 | bg-gradient-to-b | Sets background linear gradient direction ('bg-gradient-to-b'). | Establishes direction for vibrant visual color transitions. |
| 8 | bg-gradient-to-r | Sets background linear gradient direction ('bg-gradient-to-r'). | Establishes direction for vibrant visual color transitions. |
| 9 | bg-gradient-to-tr | Sets background linear gradient direction ('bg-gradient-to-tr'). | Establishes direction for vibrant visual color transitions. |
| 10 | bg-indigo-950 | Sets background color or opacity ('bg-indigo-950'). | Styles container surface colors in dark theme palette. |
| 11 | bg-pink-950 | Sets background color or opacity ('bg-pink-950'). | Styles container surface colors in dark theme palette. |
| 12 | bg-purple-950 | Sets background color or opacity ('bg-purple-950'). | Styles container surface colors in dark theme palette. |
| 13 | bg-slate-800 | Sets background color or opacity ('bg-slate-800'). | Styles container surface colors in dark theme palette. |
| 14 | bg-slate-800/80 | Sets background color or opacity ('bg-slate-800/80'). | Styles container surface colors in dark theme palette. |
| 15 | bg-slate-900 | Sets background color or opacity ('bg-slate-900'). | Styles container surface colors in dark theme palette. |
| 16 | bg-slate-900/50 | Sets background color or opacity ('bg-slate-900/50'). | Styles container surface colors in dark theme palette. |
| 17 | bg-slate-900/80 | Sets background color or opacity ('bg-slate-900/80'). | Styles container surface colors in dark theme palette. |
| 18 | bg-slate-900/95 | Sets background color or opacity ('bg-slate-900/95'). | Styles container surface colors in dark theme palette. |
| 19 | bg-slate-950 | Sets background color or opacity ('bg-slate-950'). | Styles container surface colors in dark theme palette. |
| 20 | bg-slate-950/80 | Sets background color or opacity ('bg-slate-950/80'). | Styles container surface colors in dark theme palette. |
| 21 | block | Sets display property state ('block'). | Shows or hides elements conditionally across device viewports. |
| 22 | border | Applies border lines, border colors, or row dividers ('border'). | Creates visual structural section lines and card boundaries. |
| 23 | border-amber-500/30 | Applies border lines, border colors, or row dividers ('border-amber-500/30'). | Creates visual structural section lines and card boundaries. |
| 24 | border-b | Applies border lines, border colors, or row dividers ('border-b'). | Creates visual structural section lines and card boundaries. |
| 25 | border-indigo-500/20 | Applies border lines, border colors, or row dividers ('border-indigo-500/20'). | Creates visual structural section lines and card boundaries. |
| 26 | border-indigo-500/30 | Applies border lines, border colors, or row dividers ('border-indigo-500/30'). | Creates visual structural section lines and card boundaries. |
| 27 | border-indigo-500/40 | Applies border lines, border colors, or row dividers ('border-indigo-500/40'). | Creates visual structural section lines and card boundaries. |
| 28 | border-pink-500/30 | Applies border lines, border colors, or row dividers ('border-pink-500/30'). | Creates visual structural section lines and card boundaries. |
| 29 | border-purple-500/30 | Applies border lines, border colors, or row dividers ('border-purple-500/30'). | Creates visual structural section lines and card boundaries. |
| 30 | border-slate-700 | Applies border lines, border colors, or row dividers ('border-slate-700'). | Creates visual structural section lines and card boundaries. |
| 31 | border-slate-800 | Applies border lines, border colors, or row dividers ('border-slate-800'). | Creates visual structural section lines and card boundaries. |
| 32 | border-slate-800/80 | Applies border lines, border colors, or row dividers ('border-slate-800/80'). | Creates visual structural section lines and card boundaries. |
| 33 | border-t | Applies border lines, border colors, or row dividers ('border-t'). | Creates visual structural section lines and card boundaries. |
| 34 | 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. |
| 35 | duration-200 | Controls CSS transition properties and timing ('duration-200'). | Ensures smooth state changes when user hovers over controls. |
| 36 | duration-300 | Controls CSS transition properties and timing ('duration-300'). | Ensures smooth state changes when user hovers over controls. |
| 37 | flex | Applies display: flex flexbox layout container. | Enables 1D alignment of child elements along row or column axes. |
| 38 | flex-col | Sets flex container direction ('flex-col'). | Arranges child components vertically in columns or horizontally in rows. |
| 39 | flex-grow | Sets flex item sizing behavior ('flex-grow'). | Pushes elements to fill available space or prevents unwanted shrinking. |
| 40 | 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. |
| 41 | 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. |
| 42 | 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. |
| 43 | font-black | Sets font weight or font family ('font-black'). | Emphasizes titles, bold headings, and monospaced code blocks. |
| 44 | font-bold | Sets font weight or font family ('font-bold'). | Emphasizes titles, bold headings, and monospaced code blocks. |
| 45 | font-extrabold | Sets font weight or font family ('font-extrabold'). | Emphasizes titles, bold headings, and monospaced code blocks. |
| 46 | font-medium | Sets font weight or font family ('font-medium'). | Emphasizes titles, bold headings, and monospaced code blocks. |
| 47 | font-mono | Sets font weight or font family ('font-mono'). | Emphasizes titles, bold headings, and monospaced code blocks. |
| 48 | font-normal | Sets font weight or font family ('font-normal'). | Emphasizes titles, bold headings, and monospaced code blocks. |
| 49 | font-sans | Sets font weight or font family ('font-sans'). | Emphasizes titles, bold headings, and monospaced code blocks. |
| 50 | font-semibold | Sets font weight or font family ('font-semibold'). | Emphasizes titles, bold headings, and monospaced code blocks. |
| 51 | from-amber-500/40 | Defines gradient color stop point ('from-amber-500/40'). | Specifies color tones for multi-stop background and text gradients. |
| 52 | from-indigo-300 | Defines gradient color stop point ('from-indigo-300'). | Specifies color tones for multi-stop background and text gradients. |
| 53 | from-indigo-400 | Defines gradient color stop point ('from-indigo-400'). | Specifies color tones for multi-stop background and text gradients. |
| 54 | from-indigo-500/20 | Defines gradient color stop point ('from-indigo-500/20'). | Specifies color tones for multi-stop background and text gradients. |
| 55 | from-indigo-500/40 | Defines gradient color stop point ('from-indigo-500/40'). | Specifies color tones for multi-stop background and text gradients. |
| 56 | from-indigo-600 | Defines gradient color stop point ('from-indigo-600'). | Specifies color tones for multi-stop background and text gradients. |
| 57 | from-indigo-600/30 | Defines gradient color stop point ('from-indigo-600/30'). | Specifies color tones for multi-stop background and text gradients. |
| 58 | from-pink-500/40 | Defines gradient color stop point ('from-pink-500/40'). | Specifies color tones for multi-stop background and text gradients. |
| 59 | from-pink-600 | Defines gradient color stop point ('from-pink-600'). | Specifies color tones for multi-stop background and text gradients. |
| 60 | from-purple-500/40 | Defines gradient color stop point ('from-purple-500/40'). | Specifies color tones for multi-stop background and text gradients. |
| 61 | from-purple-600 | Defines gradient color stop point ('from-purple-600'). | Specifies color tones for multi-stop background and text gradients. |
| 62 | from-slate-900 | Defines gradient color stop point ('from-slate-900'). | Specifies color tones for multi-stop background and text gradients. |
| 63 | from-slate-950 | Defines gradient color stop point ('from-slate-950'). | Specifies color tones for multi-stop background and text gradients. |
| 64 | gap-1 | Defines grid/flex spacing gaps or vertical element stacks ('gap-1'). | Enforces consistent whitespace rhythm between sibling elements. |
| 65 | gap-2 | Defines grid/flex spacing gaps or vertical element stacks ('gap-2'). | Enforces consistent whitespace rhythm between sibling elements. |
| 66 | gap-3 | Defines grid/flex spacing gaps or vertical element stacks ('gap-3'). | Enforces consistent whitespace rhythm between sibling elements. |
| 67 | gap-8 | Defines grid/flex spacing gaps or vertical element stacks ('gap-8'). | Enforces consistent whitespace rhythm between sibling elements. |
| 68 | grid | Applies display: grid multi-column layout container. | Enables 2D grid component placement across columns and rows. |
| 69 | grid-cols-1 | Defines grid template column counts ('grid-cols-1'). | Splits card grid layouts into multi-column responsive tracks. |
| 70 | group | Tailwind CSS utility class 'group'. | Provides specialized utility styling for 'group'. |
| 71 | 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. |
| 72 | 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. |
| 73 | 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. |
| 74 | group-hover:text-indigo-300 | Triggers 'text-indigo-300' on child when parent '.group' element is hovered. Sets text font size or color tone ('text-indigo-300'). | Coordinates synchronized multi-element hover animations. |
| 75 | 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. |
| 76 | h-11 | Sets container height constraint 'h-11'. | Controls vertical height bounds and scrolling triggers. |
| 77 | h-12 | Sets container height constraint 'h-12'. | Controls vertical height bounds and scrolling triggers. |
| 78 | h-20 | Sets container height constraint 'h-20'. | Controls vertical height bounds and scrolling triggers. |
| 79 | h-4 | Sets container height constraint 'h-4'. | Controls vertical height bounds and scrolling triggers. |
| 80 | h-48 | Sets container height constraint 'h-48'. | Controls vertical height bounds and scrolling triggers. |
| 81 | h-6 | Sets container height constraint 'h-6'. | Controls vertical height bounds and scrolling triggers. |
| 82 | h-full | Sets container height constraint 'h-full'. | Controls vertical height bounds and scrolling triggers. |
| 83 | hidden | Sets display property state ('hidden'). | Shows or hides elements conditionally across device viewports. |
| 84 | 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. |
| 85 | 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. |
| 86 | hover:from-amber-500 | Triggers 'from-amber-500' on mouse hover state. Defines gradient color stop point ('from-amber-500'). | Provides interactive hover feedback to enhance user experience. |
| 87 | 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. |
| 88 | hover:from-indigo-600 | Triggers 'from-indigo-600' on mouse hover state. Defines gradient color stop point ('from-indigo-600'). | Provides interactive hover feedback to enhance user experience. |
| 89 | 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. |
| 90 | 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. |
| 91 | hover:from-pink-600 | Triggers 'from-pink-600' on mouse hover state. Defines gradient color stop point ('from-pink-600'). | Provides interactive hover feedback to enhance user experience. |
| 92 | 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. |
| 93 | hover:from-purple-600 | Triggers 'from-purple-600' on mouse hover state. Defines gradient color stop point ('from-purple-600'). | Provides interactive hover feedback to enhance user experience. |
| 94 | 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. |
| 95 | 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. |
| 96 | 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. |
| 97 | 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. |
| 98 | 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. |
| 99 | 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. |
| 100 | hover:to-pink-600 | Triggers 'to-pink-600' on mouse hover state. Defines gradient color stop point ('to-pink-600'). | Provides interactive hover feedback to enhance user experience. |
| 101 | hover:to-purple-600 | Triggers 'to-purple-600' on mouse hover state. Defines gradient color stop point ('to-purple-600'). | Provides interactive hover feedback to enhance user experience. |
| 102 | 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. |
| 103 | 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. |
| 104 | inline-block | Tailwind CSS utility class 'inline-block'. | Provides specialized utility styling for 'inline-block'. |
| 105 | inline-flex | Applies display: inline-flex flexbox layout container. | Enables 1D alignment of child elements along row or column axes. |
| 106 | items-center | Sets flex/grid alignment along main/cross axes ('items-center'). | Positions icons, logos, and buttons precisely. |
| 107 | justify-between | Sets flex/grid alignment along main/cross axes ('justify-between'). | Positions icons, logos, and buttons precisely. |
| 108 | justify-center | Sets flex/grid alignment along main/cross axes ('justify-center'). | Positions icons, logos, and buttons precisely. |
| 109 | leading-relaxed | Controls line-height spacing ('leading-relaxed'). | Improves line spacing for multi-line headings and paragraph copy. |
| 110 | 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. |
| 111 | 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. |
| 112 | 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. |
| 113 | lg:py-24 | Applies 'py-24' only on lg screens (≥1024px). Applies padding spacing rule 'py-24'. | Responsive layout adaptation: Controls internal whitespace around element content. |
| 114 | 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. |
| 115 | max-h-[500px] | Sets container height constraint 'max-h-[500px]'. | Controls vertical height bounds and scrolling triggers. |
| 116 | max-w-3xl | Sets container width constraint 'max-w-3xl'. | Maintains element sizing bounds across screen resolutions. |
| 117 | max-w-7xl | Sets container width constraint 'max-w-7xl'. | Maintains element sizing bounds across screen resolutions. |
| 118 | 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. |
| 119 | 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. |
| 120 | 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. |
| 121 | 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. |
| 122 | min-h-screen | Sets container height constraint 'min-h-screen'. | Controls vertical height bounds and scrolling triggers. |
| 123 | mt-1 | Applies margin spacing rule 'mt-1'. | Controls external spacing between adjacent UI components. |
| 124 | mx-auto | Sets left and right margin to auto (margin-left: auto; margin-right: auto;). | Centers fixed-width block containers horizontally on the screen. |
| 125 | object-cover | Sets CSS object-fit to cover for images. | Fills image containers without stretching or distorting aspect ratio. |
| 126 | overflow-hidden | Controls content clipping and scroll behavior ('overflow-hidden'). | Prevents layout breaking and enables custom scrollbars. |
| 127 | overflow-y-auto | Controls content clipping and scroll behavior ('overflow-y-auto'). | Prevents layout breaking and enables custom scrollbars. |
| 128 | p-0.5 | Applies padding spacing rule 'p-0.5'. | Controls internal whitespace around element content. |
| 129 | p-2 | Applies padding spacing rule 'p-2'. | Controls internal whitespace around element content. |
| 130 | p-2.5 | Applies padding spacing rule 'p-2.5'. | Controls internal whitespace around element content. |
| 131 | p-5 | Applies padding spacing rule 'p-5'. | Controls internal whitespace around element content. |
| 132 | p-6 | Applies padding spacing rule 'p-6'. | Controls internal whitespace around element content. |
| 133 | pb-6 | Applies padding spacing rule 'pb-6'. | Controls internal whitespace around element content. |
| 134 | pt-2 | Applies padding spacing rule 'pt-2'. | Controls internal whitespace around element content. |
| 135 | pt-3 | Applies padding spacing rule 'pt-3'. | Controls internal whitespace around element content. |
| 136 | pt-4 | Applies padding spacing rule 'pt-4'. | Controls internal whitespace around element content. |
| 137 | px-2 | Applies padding spacing rule 'px-2'. | Controls internal whitespace around element content. |
| 138 | px-2.5 | Applies padding spacing rule 'px-2.5'. | Controls internal whitespace around element content. |
| 139 | px-4 | Applies padding spacing rule 'px-4'. | Controls internal whitespace around element content. |
| 140 | px-5 | Applies padding spacing rule 'px-5'. | Controls internal whitespace around element content. |
| 141 | py-0.5 | Applies padding spacing rule 'py-0.5'. | Controls internal whitespace around element content. |
| 142 | py-1.5 | Applies padding spacing rule 'py-1.5'. | Controls internal whitespace around element content. |
| 143 | py-16 | Applies padding spacing rule 'py-16'. | Controls internal whitespace around element content. |
| 144 | py-2 | Applies padding spacing rule 'py-2'. | Controls internal whitespace around element content. |
| 145 | py-2.5 | Applies padding spacing rule 'py-2.5'. | Controls internal whitespace around element content. |
| 146 | py-20 | Applies padding spacing rule 'py-20'. | Controls internal whitespace around element content. |
| 147 | py-3 | Applies padding spacing rule 'py-3'. | Controls internal whitespace around element content. |
| 148 | relative | Sets CSS position property ('relative'). | Controls element positioning context for overlays, badges, and sticky headers. |
| 149 | right-2 | Controls offset coordinates or z-index stacking ('right-2'). | Positions floating badges and ensures sticky headers stay on top. |
| 150 | rounded | Sets border radius curved corners ('rounded'). | Softens card edges, badges, and buttons for modern aesthetic. |
| 151 | rounded-2xl | Sets border radius curved corners ('rounded-2xl'). | Softens card edges, badges, and buttons for modern aesthetic. |
| 152 | rounded-[10px] | Sets border radius curved corners ('rounded-[10px]'). | Softens card edges, badges, and buttons for modern aesthetic. |
| 153 | rounded-[15px] | Sets border radius curved corners ('rounded-[15px]'). | Softens card edges, badges, and buttons for modern aesthetic. |
| 154 | rounded-full | Sets border radius curved corners ('rounded-full'). | Softens card edges, badges, and buttons for modern aesthetic. |
| 155 | rounded-lg | Sets border radius curved corners ('rounded-lg'). | Softens card edges, badges, and buttons for modern aesthetic. |
| 156 | rounded-xl | Sets border radius curved corners ('rounded-xl'). | Softens card edges, badges, and buttons for modern aesthetic. |
| 157 | scroll-smooth | Applies CSS scroll-behavior: smooth. | Smoothly scrolls page when clicking anchor link targets. |
| 158 | selection:bg-pink-500 | Sets user text highlight selection styles ('bg-pink-500'). | Customizes brand appearance when students highlight text content. |
| 159 | selection:text-white | Sets user text highlight selection styles ('text-white'). | Customizes brand appearance when students highlight text content. |
| 160 | shadow-indigo-500/20 | Applies drop shadow depth filter ('shadow-indigo-500/20'). | Generates glowing visual depth beneath cards and buttons. |
| 161 | shadow-indigo-950/40 | Applies drop shadow depth filter ('shadow-indigo-950/40'). | Generates glowing visual depth beneath cards and buttons. |
| 162 | shadow-lg | Applies drop shadow depth filter ('shadow-lg'). | Generates glowing visual depth beneath cards and buttons. |
| 163 | shadow-md | Applies drop shadow depth filter ('shadow-md'). | Generates glowing visual depth beneath cards and buttons. |
| 164 | shadow-purple-500/30 | Applies drop shadow depth filter ('shadow-purple-500/30'). | Generates glowing visual depth beneath cards and buttons. |
| 165 | shadow-purple-600/30 | Applies drop shadow depth filter ('shadow-purple-600/30'). | Generates glowing visual depth beneath cards and buttons. |
| 166 | shadow-sm | Applies drop shadow depth filter ('shadow-sm'). | Generates glowing visual depth beneath cards and buttons. |
| 167 | shadow-xl | Applies drop shadow depth filter ('shadow-xl'). | Generates glowing visual depth beneath cards and buttons. |
| 168 | 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. |
| 169 | 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. |
| 170 | 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. |
| 171 | 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. |
| 172 | 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. |
| 173 | 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. |
| 174 | space-y-12 | Defines grid/flex spacing gaps or vertical element stacks ('space-y-12'). | Enforces consistent whitespace rhythm between sibling elements. |
| 175 | space-y-3 | Defines grid/flex spacing gaps or vertical element stacks ('space-y-3'). | Enforces consistent whitespace rhythm between sibling elements. |
| 176 | space-y-4 | Defines grid/flex spacing gaps or vertical element stacks ('space-y-4'). | Enforces consistent whitespace rhythm between sibling elements. |
| 177 | space-y-6 | Defines grid/flex spacing gaps or vertical element stacks ('space-y-6'). | Enforces consistent whitespace rhythm between sibling elements. |
| 178 | sticky | Sets CSS position property ('sticky'). | Controls element positioning context for overlays, badges, and sticky headers. |
| 179 | text-3xl | Sets text font size or color tone ('text-3xl'). | Establishes readable typographic hierarchy and contrast. |
| 180 | text-4xl | Sets text font size or color tone ('text-4xl'). | Establishes readable typographic hierarchy and contrast. |
| 181 | text-[10px] | Sets text font size or color tone ('text-[10px]'). | Establishes readable typographic hierarchy and contrast. |
| 182 | text-[11px] | Sets text font size or color tone ('text-[11px]'). | Establishes readable typographic hierarchy and contrast. |
| 183 | text-amber-300 | Sets text font size or color tone ('text-amber-300'). | Establishes readable typographic hierarchy and contrast. |
| 184 | text-base | Sets text font size or color tone ('text-base'). | Establishes readable typographic hierarchy and contrast. |
| 185 | text-center | Sets text font size or color tone ('text-center'). | Establishes readable typographic hierarchy and contrast. |
| 186 | text-indigo-300 | Sets text font size or color tone ('text-indigo-300'). | Establishes readable typographic hierarchy and contrast. |
| 187 | text-indigo-400 | Sets text font size or color tone ('text-indigo-400'). | Establishes readable typographic hierarchy and contrast. |
| 188 | text-lg | Sets text font size or color tone ('text-lg'). | Establishes readable typographic hierarchy and contrast. |
| 189 | text-pink-300 | Sets text font size or color tone ('text-pink-300'). | Establishes readable typographic hierarchy and contrast. |
| 190 | text-pink-400 | Sets text font size or color tone ('text-pink-400'). | Establishes readable typographic hierarchy and contrast. |
| 191 | text-purple-300 | Sets text font size or color tone ('text-purple-300'). | Establishes readable typographic hierarchy and contrast. |
| 192 | text-slate-100 | Sets text font size or color tone ('text-slate-100'). | Establishes readable typographic hierarchy and contrast. |
| 193 | text-slate-300 | Sets text font size or color tone ('text-slate-300'). | Establishes readable typographic hierarchy and contrast. |
| 194 | text-slate-400 | Sets text font size or color tone ('text-slate-400'). | Establishes readable typographic hierarchy and contrast. |
| 195 | text-sm | Sets text font size or color tone ('text-sm'). | Establishes readable typographic hierarchy and contrast. |
| 196 | text-transparent | Makes foreground text color transparent (color: transparent;). | Allows background text gradients to show through text glyphs. |
| 197 | text-white | Sets text font size or color tone ('text-white'). | Establishes readable typographic hierarchy and contrast. |
| 198 | text-xl | Sets text font size or color tone ('text-xl'). | Establishes readable typographic hierarchy and contrast. |
| 199 | text-xs | Sets text font size or color tone ('text-xs'). | Establishes readable typographic hierarchy and contrast. |
| 200 | to-amber-500 | Defines gradient color stop point ('to-amber-500'). | Specifies color tones for multi-stop background and text gradients. |
| 201 | to-pink-400 | Defines gradient color stop point ('to-pink-400'). | Specifies color tones for multi-stop background and text gradients. |
| 202 | to-pink-500 | Defines gradient color stop point ('to-pink-500'). | Specifies color tones for multi-stop background and text gradients. |
| 203 | to-pink-500/20 | Defines gradient color stop point ('to-pink-500/20'). | Specifies color tones for multi-stop background and text gradients. |
| 204 | to-pink-600 | Defines gradient color stop point ('to-pink-600'). | Specifies color tones for multi-stop background and text gradients. |
| 205 | to-purple-500/20 | Defines gradient color stop point ('to-purple-500/20'). | Specifies color tones for multi-stop background and text gradients. |
| 206 | to-purple-600 | Defines gradient color stop point ('to-purple-600'). | Specifies color tones for multi-stop background and text gradients. |
| 207 | to-purple-600/30 | Defines gradient color stop point ('to-purple-600/30'). | Specifies color tones for multi-stop background and text gradients. |
| 208 | to-slate-900 | Defines gradient color stop point ('to-slate-900'). | Specifies color tones for multi-stop background and text gradients. |
| 209 | to-slate-950 | Defines gradient color stop point ('to-slate-950'). | Specifies color tones for multi-stop background and text gradients. |
| 210 | top-0 | Controls offset coordinates or z-index stacking ('top-0'). | Positions floating badges and ensures sticky headers stay on top. |
| 211 | top-2 | Controls offset coordinates or z-index stacking ('top-2'). | Positions floating badges and ensures sticky headers stay on top. |
| 212 | tracking-tight | Controls letter spacing / kerning ('tracking-tight'). | Refines typography legibility for uppercase titles and badges. |
| 213 | tracking-widest | Controls letter spacing / kerning ('tracking-widest'). | Refines typography legibility for uppercase titles and badges. |
| 214 | transition-all | Controls CSS transition properties and timing ('transition-all'). | Ensures smooth state changes when user hovers over controls. |
| 215 | transition-colors | Controls CSS transition properties and timing ('transition-colors'). | Ensures smooth state changes when user hovers over controls. |
| 216 | transition-transform | Controls CSS transition properties and timing ('transition-transform'). | Ensures smooth state changes when user hovers over controls. |
| 217 | uppercase | Applies text-transform rule 'uppercase'. | Formats badge labels and category headers cleanly. |
| 218 | via-indigo-950/40 | Defines gradient color stop point ('via-indigo-950/40'). | Specifies color tones for multi-stop background and text gradients. |
| 219 | via-purple-300 | Defines gradient color stop point ('via-purple-300'). | Specifies color tones for multi-stop background and text gradients. |
| 220 | via-purple-500/20 | Defines gradient color stop point ('via-purple-500/20'). | Specifies color tones for multi-stop background and text gradients. |
| 221 | via-purple-600 | Defines gradient color stop point ('via-purple-600'). | Specifies color tones for multi-stop background and text gradients. |
| 222 | w-11 | Sets container width constraint 'w-11'. | Maintains element sizing bounds across screen resolutions. |
| 223 | w-12 | Sets container width constraint 'w-12'. | Maintains element sizing bounds across screen resolutions. |
| 224 | w-4 | Sets container width constraint 'w-4'. | Maintains element sizing bounds across screen resolutions. |
| 225 | w-6 | Sets container width constraint 'w-6'. | Maintains element sizing bounds across screen resolutions. |
| 226 | w-full | Sets container width constraint 'w-full'. | Maintains element sizing bounds across screen resolutions. |
| 227 | z-10 | Controls offset coordinates or z-index stacking ('z-10'). | Positions floating badges and ensures sticky headers stay on top. |
| 228 | z-50 | Controls offset coordinates or z-index stacking ('z-50'). | Positions floating badges and ensures sticky headers stay on top. |