## Завдання
Завершіть надану HTML-структуру, додавши відсутні класи Tailwind CSS відповідно до вимог макета.
- **Батьківський div**: Встановити відображення flex і розташувати елементи у стовпчик;
- **Дочірні div**: Вирівняти елементи по горизонталі та вертикалі всередині контейнера.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBGbGV4Ym94IFV0aWxpdGllcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdgogICAgICBjbGFzcz0iX19fX18gX19fX18gX19fX18gX19fX18gYmctcmVkLTEwMCIKICAgICAgc3R5bGU9ImhlaWdodDogMjAwcHgiCiAgICA+CiAgICAgIDxkaXYgY2xhc3M9InAtNCBiZy1ibHVlLTUwMCI+SXRlbSAxPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InAtNCBiZy1ncmVlbi01MDAiPkl0ZW0gMjwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

Для батьківського `div`:
- Використовуйте `flex`, щоб задати елементу розмітку Flexbox;
- Використовуйте `flex-col`, щоб розташувати елементи у стовпчик;
- Використовуйте `items-center`, щоб вирівняти елементи по центру;
- Використовуйте `justify-center`, щоб вирівняти елементи по центру.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBGbGV4Ym94IFV0aWxpdGllcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYKICAgICAgY2xhc3M9ImZsZXggZmxleC1jb2wgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGJnLXJlZC0xMDAiCiAgICAgIHN0eWxlPSJoZWlnaHQ6IDIwMHB4IgogICAgPgogICAgICA8ZGl2IGNsYXNzPSJwLTQgYmctYmx1ZS01MDAiPkl0ZW0gMTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJwLTQgYmctZ3JlZW4tNTAwIj5JdGVtIDI8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

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

Завдання: Flexbox у Дії

Завдання

Awesome!

Завдання: Flexbox у Дії

Завдання