I am using Tailwind CSS in my PHP/HTML project, so the only solution I’m looking for is tailwind. I got the tabs to sit side by side, but unfortunately, when I test on small screens, they still sit side by side, and appear horribly squished and out of screen. Which is why I want them to be stacked atop each other on small screens. Also, I haven’t been able to get the tabs to display in rows of 4s for large screens but rows of 3s for medium screens. my code:
<div class="flex flex-wrap justify-center gap-4 mt-8 px-4">
<?php
if (isLoggedIn()) {
$links = [
['name' => 'Home', 'href' => '/', 'icon' => 'home'],
['name' => 'Inspections', 'href' => '/inspections', 'icon' => 'clipboard'],
['name' => 'Questions', 'href' => '/questions', 'icon' => 'question-mark'],
['name' => 'Inspectors', 'href' => '/inspectors', 'icon' => 'user-plus'],
['name' => 'Cover Pages', 'href' => '/covers', 'icon' => 'document-text'],
['name' => 'Profile', 'href' => '/profile', 'icon' => 'user'],
['name' => 'Contact', 'href' => '/contact', 'icon' => 'users'],
];
}
foreach ($links as $link): ?>
<a href="<?= BASE_PATH . $link['href'] ?>" class="flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:bg-gray-200 dark:hover:bg-gray-700 transition cursor-pointer" style="width:140px; height:140px;">
<?php switch ($link['icon']) {
case 'home':
echo '<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-600 dark:text-white mb-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M3 9.75L12 3l9 6.75V21a.75.75 0 01-.75.75H3.75A.75.75 0 013 21V9.75z" />
</svg>';
break;
case 'clipboard':
echo '<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-600 dark:text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
</svg>';
break;
case 'question-mark':
echo '<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-600 dark:text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
</svg>';
break;
case 'user-plus':
echo '<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-600 dark:text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
</svg>';
break;
case 'document-text':
echo '<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-600 dark:text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg>';
break;
case 'user':
echo '<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-600 dark:text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>';
break;
case 'users':
echo '<svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-blue-600 dark:text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75a3 3 0 11-6 0 3 3 0 016 0zM6.75 6.75a3 3 0 116 0 3 3 0 01-6 0zM3 21a6 6 0 0112 0M9 21a6 6 0 0112 0" />
</svg>';
break;
} ?>
<span class="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"><?= $link['name'] ?></span>
</a>
<?php endforeach; ?>
</div>
I tried updating the grid container to this:
<div class="grid gap-4 mt-8 px-4 max-w-screen-lg mx-auto grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 auto-cols-max justify-items-center">
and the tab anchors to this:
<a href="<?= BASE_PATH . $link['href'] ?>" class="h-[140px] flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:bg-gray-200 dark:hover:bg-gray-700 transition cursor-pointer">
which made the tabs stack on small screens exactly as I wanted; however, the same also is happening on large screens and medium screens, which is not the effect I intended.