Завдання: Створення Компоненту Картки
Завдання
Використовуючи Tailwind CSS, створіть компонент картки з наступними вимогами:
- Картка повинна мати:
- Максимальну ширину
md; - Округлені кути;
- Фоновий колір.
- Максимальну ширину
- Картка повинна містити:
- Зображення, яке займає всю ширину картки;
- Заголовок із жирним шрифтом та великим розміром шрифту;
- Абзац із базовим розміром шрифту та курсивним стилем.
- Додайте бейджі до картки з:
- Округленими кутами та малим розміром шрифту.
index.html
- Використовуйте
max-w-mdдля встановлення максимальної ширини картки; - Використовуйте
roundedдля додавання округлених кутів картці; - Використовуйте
bg-purple-100для встановлення фонового кольору картки; - Використовуйте
w-fullдля того, щоб зображення займало всю ширину картки; - Використовуйте
font-boldдля застосування жирного стилю до тексту; - Використовуйте
text-xlдля встановлення більшого розміру шрифту для заголовка; - Використовуйте
text-baseдля встановлення базового розміру шрифту для тексту абзацу; - Використовуйте
italicдля застосування курсивного стилю до тексту; - Використовуйте
rounded-fullдля додавання округлених кутів бейджам; - Використовуйте
text-smдля встановлення малого розміру шрифту для бейджів.
index.html
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 3. Розділ 4
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Suggested prompts:
Can you show me an example of the card component using these Tailwind classes?
What should the content (image, title, paragraph, badges) of the card be?
Can you explain how to add multiple badges to the card?
Awesome!
Completion rate improved to 3.57
Завдання: Створення Компоненту Картки
Свайпніть щоб показати меню
Завдання
Використовуючи Tailwind CSS, створіть компонент картки з наступними вимогами:
- Картка повинна мати:
- Максимальну ширину
md; - Округлені кути;
- Фоновий колір.
- Максимальну ширину
- Картка повинна містити:
- Зображення, яке займає всю ширину картки;
- Заголовок із жирним шрифтом та великим розміром шрифту;
- Абзац із базовим розміром шрифту та курсивним стилем.
- Додайте бейджі до картки з:
- Округленими кутами та малим розміром шрифту.
index.html
- Використовуйте
max-w-mdдля встановлення максимальної ширини картки; - Використовуйте
roundedдля додавання округлених кутів картці; - Використовуйте
bg-purple-100для встановлення фонового кольору картки; - Використовуйте
w-fullдля того, щоб зображення займало всю ширину картки; - Використовуйте
font-boldдля застосування жирного стилю до тексту; - Використовуйте
text-xlдля встановлення більшого розміру шрифту для заголовка; - Використовуйте
text-baseдля встановлення базового розміру шрифту для тексту абзацу; - Використовуйте
italicдля застосування курсивного стилю до тексту; - Використовуйте
rounded-fullдля додавання округлених кутів бейджам; - Використовуйте
text-smдля встановлення малого розміру шрифту для бейджів.
index.html
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 3. Розділ 4