Learn Tailwind CSS: Build a Responsive Product Card

This short project-based course teaches learners to build a responsive product card with Tailwind CSS. It covers custom colors and fonts, typography, gradients, grids, background images, buttons, transforms, transitions, and shadows.

Syllabus

Introduction to the course
A super quickTailwindCSS recap
Aside - The tailwind.config object
Adding custom colours
Aside - Fonts in TailwindCSS
Adding custom fonts
Aside - Max width in TailwindCSS
Crafting the card
Font and Text Classes
Aside - Gradients in TailwindCSS
Styling the buttons
Aside - Lists in TailwindCSS
Styling the features section
Aside - Grids in TailwindCSS
Mobile and desktop views
Aside - Background images in TailwindCSS
Adding the background images
Aside - Transforms in TailwindCSS
Aside - Transitions in TailwindCSS
Styling the wishlist button
Aside - Arbitrary values in TailwindCSS
Adding the dropshadow
Congratulations!