Three Column Grid
Responsive three-column grid layout
Preview
Column 1
First column
Column 2
Second column
Column 3
Third column
{ window.Prism.highlightElement($refs.codeEl) }) }"
class="w-full flex items-center justify-between px-6 py-4 text-left bg-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
View Code
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Column 1</h3>
<p class="text-gray-600 dark:text-gray-400">First column</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Column 2</h3>
<p class="text-gray-600 dark:text-gray-400">Second column</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Column 3</h3>
<p class="text-gray-600 dark:text-gray-400">Third column</p>
</div>
</div>