Szablon Tailwind – Kolumna Główna i kolumna boczna

<div class="max-w-screen-xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
    
    <!-- Główna kolumna -->
    <div class="md:col-span-3 border border-gray-300 rounded-lg p-6 bg-white shadow-sm">
      <h2 class="text-xl font-bold mb-4">Artykuły</h2>
      <div class="space-y-4">
        <div class="border border-red-400 rounded p-4">
          <h3 class="font-semibold text-lg">The Evolution of Gaming Controllers</h3>
          <p class="text-sm text-gray-600">Od joysticków do zaawansowanych kontrolerów...</p>
        </div>
        <div class="border border-red-400 rounded p-4">
          <h3 class="font-semibold text-lg">Retro Gaming Renaissance</h3>
          <p class="text-sm text-gray-600">Powrót klasyków w nowym wydaniu...</p>
        </div>
      </div>
    </div>

    <!-- Boczna kolumna -->
    <div class="border border-gray-300 rounded-lg p-6 bg-white shadow-sm">
      <h2 class="text-xl font-bold mb-4">Kategorie</h2>
      <ul class="list-disc list-inside text-gray-700 mb-6">
        <li>Retro Gaming</li>
        <li>Hardware Reviews</li>
        <li>Gaming News</li>
        <li>Indie Games</li>
        <li>Tutorials</li>
        <li>Game Reviews</li>
      </ul>

      <h2 class="text-xl font-bold mb-4">Popularne tagi</h2>
      <div class="flex flex-wrap gap-2">
        <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">NES</span>
        <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">Controllers</span>
        <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">Reviews</span>
        <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">Indie Games</span>
        <span class="bg-gray-200 px-3 py-1 rounded-full text-sm">Tutorials</span>
      </div>
    </div>

  </div>
</div>

<div class="max-w-screen-xl mx-auto px-4 py-8"> //dla szerokosci 1280
<div class="container mx-auto max-w-none px-4"> //dla szerokosci 100%