Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Завдання: Створення Компоненту Картки | Створення базових компонентів
Tailwind CSS для Веброзробки

bookЗавдання: Створення Компоненту Картки

Завдання

Використовуючи Tailwind CSS, створіть компонент картки з наступними вимогами:

  1. Картка повинна мати:
    • Максимальну ширину md;
    • Округлені кути;
    • Фоновий колір.
  2. Картка повинна містити:
    • Зображення, яке займає всю ширину картки;
    • Заголовок із жирним шрифтом та великим розміром шрифту;
    • Абзац із базовим розміром шрифту та курсивним стилем.
  3. Додайте бейджі до картки з:
    • Округленими кутами та малим розміром шрифту.
index.html

index.html

copy
  • Використовуйте max-w-md для встановлення максимальної ширини картки;
  • Використовуйте rounded для додавання округлених кутів картці;
  • Використовуйте bg-purple-100 для встановлення фонового кольору картки;
  • Використовуйте w-full для того, щоб зображення займало всю ширину картки;
  • Використовуйте font-bold для застосування жирного стилю до тексту;
  • Використовуйте text-xl для встановлення більшого розміру шрифту для заголовка;
  • Використовуйте text-base для встановлення базового розміру шрифту для тексту абзацу;
  • Використовуйте italic для застосування курсивного стилю до тексту;
  • Використовуйте rounded-full для додавання округлених кутів бейджам;
  • Використовуйте text-sm для встановлення малого розміру шрифту для бейджів.
index.html

index.html

copy
Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 4

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

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

bookЗавдання: Створення Компоненту Картки

Свайпніть щоб показати меню

Завдання

Використовуючи Tailwind CSS, створіть компонент картки з наступними вимогами:

  1. Картка повинна мати:
    • Максимальну ширину md;
    • Округлені кути;
    • Фоновий колір.
  2. Картка повинна містити:
    • Зображення, яке займає всю ширину картки;
    • Заголовок із жирним шрифтом та великим розміром шрифту;
    • Абзац із базовим розміром шрифту та курсивним стилем.
  3. Додайте бейджі до картки з:
    • Округленими кутами та малим розміром шрифту.
index.html

index.html

copy
  • Використовуйте max-w-md для встановлення максимальної ширини картки;
  • Використовуйте rounded для додавання округлених кутів картці;
  • Використовуйте bg-purple-100 для встановлення фонового кольору картки;
  • Використовуйте w-full для того, щоб зображення займало всю ширину картки;
  • Використовуйте font-bold для застосування жирного стилю до тексту;
  • Використовуйте text-xl для встановлення більшого розміру шрифту для заголовка;
  • Використовуйте text-base для встановлення базового розміру шрифту для тексту абзацу;
  • Використовуйте italic для застосування курсивного стилю до тексту;
  • Використовуйте rounded-full для додавання округлених кутів бейджам;
  • Використовуйте text-sm для встановлення малого розміру шрифту для бейджів.
index.html

index.html

copy
Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 4
some-alt