## Завдання
Завершіть надану HTML-структуру, додавши відсутні класи Tailwind CSS відповідно до зазначених вимог щодо відступів.
- **Перший div**: Додайте зовнішній відступ (margin) 2rem (32px) з усіх сторін та внутрішній відступ (padding) 1rem (16px) з усіх сторін;
- **Другий div**: Додайте зовнішній відступ зверху 1rem (16px) та знизу 2rem (32px). Додайте внутрішній відступ 0.5rem (8px) з усіх сторін;
- **Третій div**: Додайте зовнішній відступ справа 1.5rem (24px) та зліва 0.75rem (12px). Додайте внутрішній відступ 1.5rem (24px) з усіх сторін.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBTcGFjaW5nIFV0aWxpdGllcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iX19fX18gX19fX18gYmctb3JhbmdlLTQwMCI+TWFyZ2luIGFuZCBQYWRkaW5nIG9uIGFsbCBzaWRlczwvZGl2PgogICAgPGRpdiBjbGFzcz0iX19fX18gX19fX18gX19fX18gYmctb3JhbmdlLTUwMCI+CiAgICAgIFRvcCBhbmQgYm90dG9tIG1hcmdpbiwgcGFkZGluZyBvbiBhbGwgc2lkZXMKICAgIDwvZGl2PgogICAgPGRpdiBjbGFzcz0iX19fX18gX19fX18gX19fX18gYmctb3JhbmdlLTYwMCI+CiAgICAgIFJpZ2h0IGFuZCBsZWZ0IG1hcmdpbiwgcGFkZGluZyBvbiBhbGwgc2lkZXMKICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

1. Для першого `div` використати `m-8` для відступу зовні та `p-4` для внутрішнього відступу.
2. Для другого `div` використати `mt-4 mb-8` для відступу зовні та `p-2` для внутрішнього відступу.
3. Для третього `div` використати `mr-6 ml-3` для відступу зовні та `p-6` для внутрішнього відступу.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBTcGFjaW5nIFV0aWxpdGllcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im0tOCBwLTQgYmctb3JhbmdlLTQwMCI+CiAgICAgIE1hcmdpbiBhbmQgUGFkZGluZyBvbiBhbGwgc2lkZXMKICAgIDwvZGl2PgogICAgPGRpdiBjbGFzcz0ibXQtNCBtYi04IHAtMiBiZy1vcmFuZ2UtNTAwIj4KICAgICAgVG9wIGFuZCBib3R0b20gbWFyZ2luLCBwYWRkaW5nIG9uIGFsbCBzaWRlcwogICAgPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJtci02IG1sLTMgcC02IGJnLW9yYW5nZS02MDAiPgogICAgICBSaWdodCBhbmQgbGVmdCBtYXJnaW4sIHBhZGRpbmcgb24gYWxsIHNpZGVzCiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Навчіться ефективно стилізувати вебсайти за допомогою 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!

Виклик: Опанування Утиліт Відступів

Завдання