Tailwind CSS

<!-- Flex container -->
<div class="flex items-center justify-between gap-4">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Common flex patterns -->
flex flex-col          /* vertical stack */
flex items-center      /* vertical center */
flex justify-center    /* horizontal center */
flex items-center justify-center  /* both center */
flex flex-wrap gap-2   /* wrapping with gap */
flex-1                 /* grow to fill space */
flex-none              /* don't grow/shrink */

<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <div>Card</div>
</div>

<!-- Grid utilities -->
grid-cols-{n}      /* fixed columns */
grid-cols-none     /* no grid */
col-span-2         /* span 2 columns */
col-span-full      /* span all columns */
row-span-2         /* span 2 rows */
gap-4              /* gap between items */
gap-x-4 gap-y-2    /* separate x/y gap */
place-items-center /* center items in cells */

<!-- Scale: 1 = 0.25rem (4px) -->
p-4         /* padding: 1rem (16px) */
px-4 py-2   /* horizontal/vertical padding */
pt-2 pb-4   /* top/bottom padding */
m-4         /* margin: 1rem */
mx-auto     /* horizontal center block */
-mt-2       /* negative margin */

/* Sizing */
w-full      /* width: 100% */
w-1/2       /* width: 50% */
w-64        /* width: 16rem (256px) */
w-screen    /* 100vw */
max-w-xl    /* max-width: 36rem */
max-w-7xl   /* max-width: 80rem — common page width */
h-screen    /* height: 100vh */
min-h-screen

<!-- Breakpoints: sm(640) md(768) lg(1024) xl(1280) 2xl(1536) -->
<div class="text-sm md:text-base lg:text-lg">
  Responsive text
</div>

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Adapts to system preference
</div>

<!-- Hover, focus, active -->
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 active:scale-95">
  Click me
</button>

<!-- Group hover -->
<div class="group">
  <p class="opacity-0 group-hover:opacity-100">Revealed on hover</p>
</div>