Challenge: Typography in Action
Task
Using the Tailwind CSS utilities for typography, create a text component with the following specifications:
- A heading (
h1) with:- Font size of 4xl;
- Bold font weight;
- Normal line height.
- A subheading (
h2) with:- Font size of 2xl;
- Semi-bold font weight;
- Tight line height.
- A paragraph (
p) with:- Font size of base;
- Normal font weight;
- Relaxed line height.
index.html
- Font Size: Use
text-4xl,text-2xl,text-basefor font sizes; - Font Weight: Use
font-bold,font-semibold,font-normalfor font weights; - Line Height: Use
leading-normal,leading-tight,leading-relaxedfor line heights.
index.html
Everything was clear?
Thanks for your feedback!
SectionΒ 2. ChapterΒ 8
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Suggested prompts:
Can you show me the complete HTML code for the text component using these Tailwind classes?
Can you explain what each Tailwind class does in this context?
Can you provide an example of how this component would look on a webpage?
Awesome!
Completion rate improved to 3.57
Challenge: Typography in Action
Swipe to show menu
Task
Using the Tailwind CSS utilities for typography, create a text component with the following specifications:
- A heading (
h1) with:- Font size of 4xl;
- Bold font weight;
- Normal line height.
- A subheading (
h2) with:- Font size of 2xl;
- Semi-bold font weight;
- Tight line height.
- A paragraph (
p) with:- Font size of base;
- Normal font weight;
- Relaxed line height.
index.html
- Font Size: Use
text-4xl,text-2xl,text-basefor font sizes; - Font Weight: Use
font-bold,font-semibold,font-normalfor font weights; - Line Height: Use
leading-normal,leading-tight,leading-relaxedfor line heights.
index.html
Everything was clear?
Thanks for your feedback!
SectionΒ 2. ChapterΒ 8