How Duolingo Plans to Reach 100M Users

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

egghead.io

Design and Implement Common Tailwind Components

via egghead.io

Go to class Write review
Coursera Ad

Google AI Professional Certificate - Learn AI Skills That Get You Hired

Learn More → DataCamp Ad

Power BI Fundamentals - Create visualizations and dashboards from scratch

Learn More →

Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
Get Full Access
Now that we covered fundamentals, we're going to design and implement common components that you will see in the wild.
We'll start with a basic Vue.js application and some hard-coded data that will be displayed within the application.

Syllabus

  • Structure a Basic Card in Tailwind
  • Design Text in a Tailwind Card to Emphasize Important Content
  • Style SVG Icons with Tailwind Utility Classes
  • Use Tailwind to Design a span that Looks like a Badge
  • Crop and Position Images with Tailwind object-fit Utilities
  • Lock an Image to a Fixed Aspect Ratio with Percentage-based Padding in Tailwind
  • Create Depth in a Tailwind Component with Shadows and Layers

Taught by

Adam Wathan

Reviews

Start your review of Design and Implement Common Tailwind Components

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.