## Завдання
Використовуючи утиліти типографіки Tailwind CSS, створіть текстовий компонент із такими характеристиками:
1. Заголовок (`h1`) з:
   - Розміром шрифту 4xl;
   - Жирним накресленням шрифту;
   - Звичайною висотою рядка.
2. Підзаголовок (`h2`) з:
   - Розміром шрифту 2xl;
   - Напівжирним накресленням шрифту;
   - Зменшеною висотою рядка.
3. Абзац (`p`) з:
   - Базовим розміром шрифту;
   - Звичайним накресленням шрифту;
   - Збільшеною висотою рядка.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBBcHBseWluZyBUeXBvZ3JhcGh5IFV0aWxpdGllcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxIGNsYXNzPSJ0ZXh0LV9fX19fIGZvbnQtX19fX18gbGVhZGluZy1fX19fXyI+TWFpbiBIZWFkaW5nPC9oMT4KICAgIDxoMiBjbGFzcz0iX19fX18tX19fX18gX19fX18tX19fX18gX19fX18tX19fX18iPlN1YmhlYWRpbmc8L2gyPgogICAgPHAgY2xhc3M9Il9fX19fIF9fX19fIF9fX19fIj4KICAgICAgVGhpcyBpcyBhIHBhcmFncmFwaCBkZW1vbnN0cmF0aW5nIGRpZmZlcmVudCBmb250IHNpemVzLCBmb250IHdlaWdodHMsIGFuZAogICAgICBsaW5lIGhlaWdodHMgdXNpbmcgVGFpbHdpbmQgQ1NTIHV0aWxpdGllcy4KICAgIDwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

1. **Розмір шрифту:** Використовуйте `text-4xl`, `text-2xl`, `text-base` для розмірів шрифту;
2. **Насиченість шрифту:** Використовуйте `font-bold`, `font-semibold`, `font-normal` для насиченості шрифту;
3. **Міжрядковий інтервал:** Використовуйте `leading-normal`, `leading-tight`, `leading-relaxed` для міжрядкових інтервалів.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBBcHBseWluZyBUeXBvZ3JhcGh5IFV0aWxpdGllcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoMSBjbGFzcz0idGV4dC00eGwgZm9udC1ib2xkIGxlYWRpbmctbm9ybWFsIj5NYWluIEhlYWRpbmc8L2gxPgogICAgPGgyIGNsYXNzPSJ0ZXh0LTJ4bCBmb250LXNlbWlib2xkIGxlYWRpbmctdGlnaHQiPlN1YmhlYWRpbmc8L2gyPgogICAgPHAgY2xhc3M9InRleHQtYmFzZSBmb250LW5vcm1hbCBsZWFkaW5nLXJlbGF4ZWQiPgogICAgICBUaGlzIGlzIGEgcGFyYWdyYXBoIGRlbW9uc3RyYXRpbmcgZGlmZmVyZW50IGZvbnQgc2l6ZXMsIGZvbnQgd2VpZ2h0cywgYW5kCiAgICAgIGxpbmUgaGVpZ2h0cyB1c2luZyBUYWlsd2luZCBDU1MgdXRpbGl0aWVzLgogICAgPC9wPgogIDwvYm9keT4KPC9odG1sPg==

Навчіться ефективно стилізувати вебсайти за допомогою Tailwind CSS — утилітарного фреймворку для швидкої розробки інтерфейсів. Дізнайтеся, як налаштувати Tailwind і застосовувати утилітарні класи для кольорів, типографіки, меж і тіней. Створюйте та стилізуйте основні компоненти, такі як кнопки, картки та форми. Опановуйте техніки компонування за допомогою відступів, flexbox і grid-утиліт. Створюйте адаптивні дизайни та налаштовуйте Tailwind відповідно до потреб проєкту.

Ознайомлення з Tailwind CSS — утилітарним фреймворком, відомим своєю гнучкістю та ефективністю у веб-стилізації. Вивчення основних переваг і філософії утилітарного підходу. Дослідження простих методів встановлення за допомогою CDN або npm/yarn.

Ознайомлення з базовими елементами Tailwind CSS, зокрема з розумінням утилітарних класів та їх застосуванням до HTML-елементів. Вивчення основних технік стилювання, таких як налаштування кольорів, меж, тіней і типографічних утиліт.

Занурення у практичні завдання зі створення та стилізації кнопок, форм і карток. Завдяки практичним вправам ви опануєте розробку цих основних UI-компонентів, удосконалюючи навички на реальних прикладах.

Ознайомлення з основними утилітами відступів у Tailwind CSS, включаючи застосування margin і padding до елементів. Вивчення використання flexbox-утиліт для керування компонуванням за допомогою налаштувань display, напрямку flex і горизонтального та вертикального вирівнювання. Дослідження grid-утиліт для створення простих, але потужних сіткових макетів із засвоєнням налаштування grid-контейнерів і елементів.

Дізнайтеся, як налаштовувати Tailwind CSS відповідно до вимог дизайну вашого проєкту та створювати адаптивні макети для різних пристроїв.

Завдання: Типографіка в Дії

Завдання

Awesome!

Завдання: Типографіка в Дії

Завдання