Mini Project: Course Card

Lesson 23 Tailwind CSS

Mini Project: Course Card

Create a complete responsive course card using Tailwind CSS.

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-md rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">

    <div class="flex items-center justify-between">

        <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-600">
            FREE
        </span>

        <span class="text-xs text-slate-400">
            6 Weeks
        </span>

    </div>

    <h2 class="mt-5 text-2xl font-extrabold text-slate-900">
        JavaScript Programming
    </h2>

    <p class="mt-3 text-sm leading-6 text-slate-500">
        Learn JavaScript and create interactive websites.
    </p>

    <div class="mt-6 flex items-center justify-between">

        <span class="text-sm font-semibold text-slate-600">
            Beginner
        </span>

        <button class="rounded-xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white">
            View Course
        </button>

    </div>

</div>