Cards

Lesson 15 Tailwind CSS

Build reusable modern card components.

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="max-w-sm rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">

    <div class="h-12 w-12 rounded-xl bg-indigo-600"></div>

    <h2 class="mt-5 text-xl font-bold text-slate-900">
        Web Development
    </h2>

    <p class="mt-2 text-sm leading-6 text-slate-500">
        Build responsive websites using modern tools.
    </p>

    <button class="mt-5 px-4 py-2 bg-slate-900 text-white rounded-lg">
        Learn More
    </button>

</div>