Tailwind Responsive Grid Layout

<!-- Responsive card grid -->
<div class=<span class="text-emerald-400">"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6"span>>
  <div class=<span class="text-emerald-400">"bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-700
              hover:shadow-md hover:-translate-y-1 transition-all duration-300"span>>
    <h3 class=<span class="text-emerald-400">"text-lg font-semibold text-gray-900 dark:text-white"span>>Card Title</h3>
    <p class=<span class="text-emerald-400">"text-gray-600 dark:text-gray-300 mt-2"span>>Card description text here.</p>
  </div>
</div>

<!-- Responsive sidebar layout -->
<div class=<span class="text-emerald-400">"flex flex-col lg:flex-row gap-8 p-6"span>>
  <aside class=<span class="text-emerald-400">"w-full lg:w-64 shrink-0"span>>
    <nav class=<span class="text-emerald-400">"space-y-2"span>><!-- Sidebar links --></nav>
  </aside>
  <main class=<span class="text-emerald-400">"flex-1 min-w-0"span>>
    <!-- Main content -->
  </main>
</div>