Flexbox

<div class="flex flex-row justify-flex-start items-stretch gap-4">
  <div class="p-4 bg-blue-500 text-white rounded">Item 1</div>
  <div class="p-4 bg-green-500 text-white rounded">Item 2</div>
  <div class="p-4 bg-purple-500 text-white rounded">Item 3</div>
</div>

<!-- Enable flex container -->
<div class="flex">...</div>

<!-- Enable inline-flex container -->
<div class="inline-flex">...</div>

.flex-row           /* row (default) */
.flex-row-reverse   /* row-reverse */
.flex-col           /* column */
.flex-col-reverse   /* column-reverse */

.justify-start         /* flex-start (default) */
.justify-center        /* center */
.justify-end           /* flex-end */
.justify-between       /* space-between */
.justify-around        /* space-around */
.justify-evenly        /* space-evenly */

.items-start      /* flex-start */
.items-center     /* center */
.items-end        /* flex-end */
.items-stretch    /* stretch (default) */
.items-baseline   /* baseline */

.flex-nowrap        /* nowrap (default) */
.flex-wrap          /* wrap */
.flex-wrap-reverse  /* wrap-reverse */

.flex-1           /* flex: 1 1 0% */
.flex-auto        /* flex: 1 1 auto */
.flex-initial     /* flex: 0 1 auto */
.flex-none        /* flex: none */
.flex-grow        /* flex-grow: 1 */
.flex-grow-0      /* flex-grow: 0 */
.flex-shrink      /* flex-shrink: 1 */
.flex-shrink-0    /* flex-shrink: 0 */

<div class="flex items-center justify-center h-screen">
  <div>Centered content</div>
</div>

<nav class="flex items-center justify-between px-4 py-3">
  <div class="logo">Logo</div>
  <ul class="flex items-center gap-4">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<div class="flex flex-col h-full">
  <div class="flex-1">Content</div>
  <div>Footer</div>
</div>