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. Зовнішній контейнер повинен мати:
    • Білий колір фону;
    • Середню тінь.
  2. Картка повинна містити:
    • Заголовок (h2) з розміром тексту 2xl і кольором тексту gray-900;
    • Параграф (p) з кольором тексту gray-700.
  3. Усередині картки створіть блок з рамкою, який має:
    • Світло-блакитний фон (наприклад, blue-50);
    • Синій колір межі;
    • Середньо заокруглені кути;
    • Колір тексту blue-700.
  4. Додайте ще один блок із:
    • Світло-зеленим фоном (наприклад, green-100);
    • Зеленим кольором межі;
    • Заокругленими кутами;
    • Малою тінню;
    • Кольором тексту green-700.
index.html

index.html

copy
  1. Фонові кольори: Використовуйте bg-white, bg-blue-50, bg-green-100 для фонових кольорів;
  2. Кольори тексту: Використовуйте text-gray-900, text-gray-700, text-blue-700, text-green-700 для кольорів тексту;
  3. Кольори рамки: Використовуйте border-blue-500, border-green-500 для кольорів рамки;
  4. Радіус скруглення: Використовуйте rounded-md, rounded для скруглених кутів;
  5. Тіні: Використовуйте shadow-md, shadow-sm для тіней;
  6. Розмір тексту: Використовуйте text-2xl для розміру заголовка.
index.html

index.html

copy

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

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

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

Секція 2. Розділ 6

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Suggested prompts:

Can you show me the complete HTML code for the styled card component?

Can you explain how to structure the card using Tailwind classes?

Can you provide a step-by-step guide to applying these Tailwind utilities?

Awesome!

Completion rate improved to 3.57

bookЗавдання: Застосування Базового Стилювання

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

Завдання

Використовуючи утиліти Tailwind CSS для кольорів, меж і тіней, створіть стилізований компонент картки з такими характеристиками:

  1. Зовнішній контейнер повинен мати:
    • Білий колір фону;
    • Середню тінь.
  2. Картка повинна містити:
    • Заголовок (h2) з розміром тексту 2xl і кольором тексту gray-900;
    • Параграф (p) з кольором тексту gray-700.
  3. Усередині картки створіть блок з рамкою, який має:
    • Світло-блакитний фон (наприклад, blue-50);
    • Синій колір межі;
    • Середньо заокруглені кути;
    • Колір тексту blue-700.
  4. Додайте ще один блок із:
    • Світло-зеленим фоном (наприклад, green-100);
    • Зеленим кольором межі;
    • Заокругленими кутами;
    • Малою тінню;
    • Кольором тексту green-700.
index.html

index.html

copy
  1. Фонові кольори: Використовуйте bg-white, bg-blue-50, bg-green-100 для фонових кольорів;
  2. Кольори тексту: Використовуйте text-gray-900, text-gray-700, text-blue-700, text-green-700 для кольорів тексту;
  3. Кольори рамки: Використовуйте border-blue-500, border-green-500 для кольорів рамки;
  4. Радіус скруглення: Використовуйте rounded-md, rounded для скруглених кутів;
  5. Тіні: Використовуйте shadow-md, shadow-sm для тіней;
  6. Розмір тексту: Використовуйте text-2xl для розміру заголовка.
index.html

index.html

copy

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

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

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

Секція 2. Розділ 6
some-alt