Find the perfect coding resourcesLearn more

Build a Product Card with Tailwind CSS

ScrimbaScrimba
Recommended
Meet Your Instructor
Rachel Johnson avatar

Rachel Johnson

Instructor

Web developer, educator, and education researcher who loves to make programming approachable for beginners.

1h 15m

Completion

Certificate included

Format

Interactive coding

Free

What You'll Learn

Understand and modify the Tailwind config object

Apply custom fonts using Tailwind CSS

Set and manage maximum widths

Style text with Tailwind CSS utilities

Create and apply gradients

Overview

Welcome to this exciting new course on Tailwind CSS! This course introduces some intermediate Tailwind concepts that are perfect for rapidly building and styling websites in the real world. If you're new to Tailwind, head to our Learn Tailwind course for a quick intro. Throughout this course, we'll build on these concepts, taking you from the basics to more advanced features, and dive into even more amazing things that Tailwind can do. We'll use Tailwind to build a web store product card for our client using professional mockups—one for desktop and one for mobile. This hands-on approach will teach you how to create responsive, professional-looking components that work seamlessly across different devices. The course covers intermediate and advanced styling techniques using Tailwind CSS, helping you craft a fully responsive, professional product card that could be used in any real-world e-commerce application. By mastering these techniques, you'll be able to rapidly prototype and build beautiful, responsive web interfaces using Tailwind's utility-first approach, significantly speeding up your development workflow.

Table of Contents
1
Introduction to this course3:06
2
A super quick TailwindCSS recap6:51
3
Aside - The tailwind.config object3:09
4
Adding custom colours3:03
5
Aside - Fonts in TailwindCSS2:30
6
Adding custom fonts2:53
7
Aside - Max width in TailwindCSS2:22
8
Crafting the card2:57
9
Font and Text Classes3:17
10
Aside - Gradients in TailwindCSS3:17
11
Styling the buttons5:53
12
Aside - Lists in TailwindCSS3:45
13
Styling the features section3:51
14
Aside - Grids in TailwindCSS2:44
15
Mobile and desktop views4:26
16
Aside - Background images in TailwindCSS4:47
17
Adding the background images2:32
18
Aside - Transforms in TailwindCSS4:42
19
Aside - Transitions in TailwindCSS2:16
20
Styling the wishlist button1:23
21
Aside - Arbitrary values in TailwindCSS3:14
22
Adding the dropshadow1:22
23
Congratulations!1:23

Share Your Experience

Sign in to leave a review and help others

No reviews yet. Be the first to review!