Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div class="grid grid-cols-3 gap-4 h-48">
  <div class="bg-gray-100 rounded flex items-center justify-center">A</div>
  <div class="bg-gray-200 rounded grid place-items-center">B (grid)</div>
  <div class="bg-gray-300 rounded flex place-items-center">C</div>
</div>

<div class="flex flex-col lg:flex-row gap-6">
  
  <main class="flex-1 order-2 lg:order-1 bg-white rounded-xl p-6">
    Main content
  </main>
  
  <aside class="w-full lg:w-64 order-1 lg:order-first bg-gray-50 rounded-xl p-4">
    Sidebar
  </aside>
</div>

<div class="grid grid-cols-2 gap-x-8 gap-y-3">
  <label class="text-sm font-medium text-gray-700">First Name</label>
  <input class="border rounded px-3 py-1.5" />
  <label class="text-sm font-medium text-gray-700">Last Name</label>
  <input class="border rounded px-3 py-1.5" />
  <label class="text-sm font-medium text-gray-700">Email</label>
  <input class="border rounded px-3 py-1.5 col-span-1" />
</div>

<div class="flex flex-wrap content-start gap-4 h-64 bg-gray-50 p-4 rounded">
  <div class="bg-blue-200 px-4 py-2 rounded">Tag 1</div>
  <div class="bg-blue-200 px-4 py-2 rounded">Tag 2</div>
  <div class="bg-blue-200 px-4 py-2 rounded">Tag 3</div>
  <div class="bg-blue-200 px-4 py-2 rounded">Tag 4</div>
</div>