Layout Example

<!doctype html>
<title>Tailwind CSS Layout Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 p-4">

<div class="container mx-auto">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
      
      <div class="aspect-video bg-slate-200">
        <div class="flex items-center justify-center h-full text-slate-400 font-bold uppercase tracking-widest">
          16:9 Video Placeholder
        </div>
      </div>
      
      <div class="p-6">
        <h2 class="text-2xl font-bold mb-4">Layout Utilities in Action</h2>
        
        
        <p class="columns-1 sm:columns-2 md:columns-3 gap-8 text-gray-600 mb-6">
          Tailwind includes utilities for creating multi-column layouts using the CSS multi-column properties. This is great for text-heavy content where you want it to flow naturally across columns. The <code>columns-*</code> utility handles the number of columns, while <code>gap-*</code> controls the spacing between them. You can adjust the number of columns at different breakpoints with responsive prefixes.
        </p>

<div class="relative h-32 bg-indigo-50 rounded-md border-2 border-dashed border-indigo-200 flex items-center justify-center">
          <div class="absolute top-2 left-2 bg-indigo-500 text-white text-xs font-bold px-2 py-1 rounded">
            Relative & Absolute
          </div>
          <p class="text-indigo-300 italic">Positioning elements with ease</p>
        </div>
      </div>
    </div>
  </div>

</body>