Flexbox & CSS Grid Utilities in Tailwind

Flexbox & Grid in Tailwind

<!-- Header Navigation with Flexbox -->
<nav class="flex items-center justify-between px-6 py-4 bg-slate-900 border-b border-slate-800">
    <div class="text-xl font-bold text-white">E-Tutorial</div>
    <div class="flex items-center space-x-4">
        <a href="#" class="text-slate-300 hover:text-white">Courses</a>
        <a href="#" class="text-slate-300 hover:text-white">Pricing</a>
    </div>
</nav>

<!-- 3-Column Responsive Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
    <div class="bg-slate-900 p-6 rounded-2xl border border-slate-800">Card 1</div>
    <div class="bg-slate-900 p-6 rounded-2xl border border-slate-800">Card 2</div>
    <div class="bg-slate-900 p-6 rounded-2xl border border-slate-800">Card 3</div>
</div>