CSS styling

Tailwind CSS

A utility-first CSS framework. Instead of writing stylesheets, you compose designs directly in your markup from tiny single-purpose classes like flex, p-4 and rounded-xl.

Demo 01

A card built entirely from utility classes

No custom CSS — every part of this card (shadow, radius, spacing, type) is a Tailwind utility class. Hover it to see the built-in transition utilities at work.

New

Utility-first styling

Compose complex components from primitive classes without ever leaving your HTML.

<div class="max-w-sm bg-white rounded-2xl shadow-md
            hover:shadow-xl transition-shadow duration-300">
  <div class="h-28 bg-gradient-to-r from-indigo-500 to-purple-500"></div>
  <div class="p-5">
    <span class="text-xs uppercase text-indigo-600 bg-indigo-50
                 rounded-full px-2.5 py-1">New</span>
    <h3 class="mt-3 text-lg font-bold text-slate-800">Utility-first</h3>
  </div>
</div>

Demo 02

Responsive grid with breakpoint prefixes

Prefixes like sm: md: lg: apply utilities only at that screen size. This grid is 1 column on phones, 2 on tablets, 4 on desktop. Resize your window to watch it reflow.

grid-cols-1 · sm:grid-cols-2 · lg:grid-cols-4

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
  <div>1</div> <div>2</div> <div>3</div> <div>4</div>
</div>

Demo 03

Badges — dark-on-light, semantic colours

Tailwind ships a full colour palette. Each badge below combines a light background with a darker text shade of the same hue — a common, accessible pattern.

Default Success Warning Danger Info

<span class="bg-emerald-100 text-emerald-700 rounded-full px-3 py-1">Success</span>
<span class="bg-rose-100 text-rose-700 rounded-full px-3 py-1">Danger</span>

Demo 04

A button group with hover & focus states

State variants (hover:, focus:, active:) let you describe interaction inline. Tab to or hover the buttons to see the ring and colour shifts.

<button class="bg-indigo-600 hover:bg-indigo-700 text-white
               rounded-lg px-4 py-2
               focus:ring-2 focus:ring-indigo-400 transition">
  Primary
</button>

Demo 05

A media object — flex utilities

The classic avatar-plus-text layout, assembled from flex, items-center, gap-* and spacing utilities. Not a line of custom CSS in sight.

WDA

Web Dev Academy

Tailwind utilities compose this entire row inline.

<div class="flex items-center gap-4">
  <div class="w-14 h-14 rounded-full bg-gradient-to-br ...">WDA</div>
  <div><p class="font-bold">Web Dev Academy</p></div>
  <button class="ml-auto text-indigo-600">Follow</button>
</div>

Built with the real Tailwind CSS loaded from the official Play CDN (cdn.tailwindcss.com), which scans the page and generates utility styles on the fly. Every demo component is styled only with Tailwind utility classes — no custom CSS rules except a thin wrapper frame. The shared CSS shell styles the surrounding page chrome.

↑ All 64 tools