Learn Tailwind CSS: Build a Responsive Product Card

Learn Tailwind CSS: Build a Responsive Product Card

freeCodeCamp.org via freeCodeCamp Direct link

A super quickTailwindCSS recap

2 of 23

2 of 23

A super quickTailwindCSS recap

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Learn Tailwind CSS: Build a Responsive Product Card

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Introduction to the course
  2. 2 A super quickTailwindCSS recap
  3. 3 Aside - The tailwind.config object
  4. 4 Adding custom colours
  5. 5 Aside - Fonts in TailwindCSS
  6. 6 Adding custom fonts
  7. 7 Aside - Max width in TailwindCSS
  8. 8 Crafting the card
  9. 9 Font and Text Classes
  10. 10 Aside - Gradients in TailwindCSS
  11. 11 Styling the buttons
  12. 12 Aside - Lists in TailwindCSS
  13. 13 Styling the features section
  14. 14 Aside - Grids in TailwindCSS
  15. 15 Mobile and desktop views
  16. 16 Aside - Background images in TailwindCSS
  17. 17 Adding the background images
  18. 18 Aside - Transforms in TailwindCSS
  19. 19 Aside - Transitions in TailwindCSS
  20. 20 Styling the wishlist button
  21. 21 Aside - Arbitrary values in TailwindCSS
  22. 22 Adding the dropshadow
  23. 23 Congratulations!

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.