Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div class="flex gap-4">
  <div class="bg-blue-100 p-4 rounded">Item 1</div>
  <div class="bg-blue-200 p-4 rounded">Item 2</div>
  <div class="bg-blue-300 p-4 rounded">Item 3</div>
</div>

<div class="flex items-center justify-center h-64 bg-gray-50 rounded-xl">
  <p class="text-gray-400">Perfectly centred</p>
</div>

<header class="flex items-center justify-between px-6 h-16 bg-white shadow">
  <span class="font-bold text-lg">Logo</span>
  <nav class="flex items-center gap-6 text-sm text-gray-600">
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
  </nav>
  <button class="bg-blue-600 text-white px-4 py-1.5 rounded-lg text-sm">Sign In</button>
</header>

<form class="flex flex-col gap-4 max-w-md mx-auto p-6">
  <input class="border rounded px-3 py-2" placeholder="Name" />
  <input class="border rounded px-3 py-2" placeholder="Email" />
  <textarea class="border rounded px-3 py-2" rows="4" placeholder="Message"></textarea>
  <button class="bg-green-600 text-white py-2 rounded font-medium">Submit</button>
</form>

<div class="flex gap-4">
  <div class="flex-1 bg-purple-50 p-4 rounded">Takes equal space</div>
  <div class="flex-1 bg-purple-100 p-4 rounded">Takes equal space</div>
  <div class="flex-none w-48 bg-purple-200 p-4 rounded">Fixed 12rem width</div>
</div>