Learn Tailwind CSS: Build a Responsive Product Card

freeCodeCamp.org

A short project that builds a responsive product card for an online store with Tailwind CSS, working from desktop and mobile mockups. Asides along the way explain Tailwind features such as custom colors and fonts, gradients and grids.

What you'll learn

  • Customizing Tailwind with your own colors and fonts
  • Styling text, buttons and lists with utility classes
  • Gradients and background images
  • Grid layouts in Tailwind
  • Making a component work on mobile and desktop

More Frontend courses