Building Dashboards

Lesson 22 Tailwind CSS

Combine cards, grids, typography and responsive utilities to create dashboards.

Learning approach

Study the Tailwind classes in the example, run the preview, then modify the classes and observe how the design changes.

Tailwind Example

HTML + Tailwind CSS

<div class="grid grid-cols-1 md:grid-cols-3 gap-5 p-5">

    <div class="rounded-2xl bg-white p-6 shadow">
        <p class="text-sm text-slate-500">Students</p>
        <h2 class="mt-2 text-3xl font-bold">1,240</h2>
    </div>

    <div class="rounded-2xl bg-white p-6 shadow">
        <p class="text-sm text-slate-500">Courses</p>
        <h2 class="mt-2 text-3xl font-bold">24</h2>
    </div>

    <div class="rounded-2xl bg-white p-6 shadow">
        <p class="text-sm text-slate-500">Projects</p>
        <h2 class="mt-2 text-3xl font-bold">86</h2>
    </div>

</div>