Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Scrimba

Build a Product Card with Tailwind CSS

via Scrimba

Go to class Write review

Overview

Discover intermediate and advanced styling techniques using Tailwind CSS and craft a fully responsive, professional product card for a web store.

Syllabus

  • Introduction to this course
  • A super quick TailwindCSS 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!
  • Want to become a Scrimbassador?
  • How to Utilize Your Certificate

Reviews

Start your review of Build a Product Card with Tailwind CSS

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.