Вивчайте Завдання: Створення Форм | Створення базових компонентів

Завдання

Використайте Tailwind CSS для завершення стилізації форми з полями введення, текстовими областями, радіокнопками та перемикачем.

Заповніть пропуски відповідними класами Tailwind CSS для досягнення бажаного вигляду.

Поля введення та текстові області:
- Світло-сіра рамка (border-gray-300);
- Середньо округлені кути (rounded-md);
- Стан фокусу з синім кільцем (focus:ring-2 та focus:ring-blue-500).
Кнопка надсилання:
- Основний синій фон (bg-blue-500);
- Темніший синій при наведенні (hover:bg-blue-700);
- Округлені кути (rounded);
- Стан фокусу з кільцем (focus:outline-none, focus:ring-2, та focus:ring-blue-500).

index.html

Колір межі: Використовуйте border-gray-300 для світло-сірої межі;
Округлені кути: Використовуйте rounded-md для середньої округлості кутів;
Кільце фокусу: Використовуйте focus:ring-2 для додавання кільця при фокусі та focus:ring-blue-500 для синього кольору.
Ховер кнопки відправки: Використовуйте hover:bg-blue-700 для темнішого синього при наведенні;
Кільце кнопки відправки: Використовуйте focus:outline-none для видалення стандартного контуру фокусу, focus:ring-2 для додавання кільця при фокусі та focus:ring-blue-500 для встановлення кольору кільця.

index.html

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

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

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

Запитати АІ

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

Suggested prompts:

What are the exact Tailwind classes I should use for each form element?

Can you show an example of a fully styled form using these Tailwind classes?

How do I apply these styles to radio buttons and switches with Tailwind?

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

Заповніть пропуски відповідними класами Tailwind CSS для досягнення бажаного вигляду.

Поля введення та текстові області:
- Світло-сіра рамка (border-gray-300);
- Середньо округлені кути (rounded-md);
- Стан фокусу з синім кільцем (focus:ring-2 та focus:ring-blue-500).
Кнопка надсилання:
- Основний синій фон (bg-blue-500);
- Темніший синій при наведенні (hover:bg-blue-700);
- Округлені кути (rounded);
- Стан фокусу з кільцем (focus:outline-none, focus:ring-2, та focus:ring-blue-500).

index.html

Колір межі: Використовуйте border-gray-300 для світло-сірої межі;
Округлені кути: Використовуйте rounded-md для середньої округлості кутів;
Кільце фокусу: Використовуйте focus:ring-2 для додавання кільця при фокусі та focus:ring-blue-500 для синього кольору.
Ховер кнопки відправки: Використовуйте hover:bg-blue-700 для темнішого синього при наведенні;
Кільце кнопки відправки: Використовуйте focus:outline-none для видалення стандартного контуру фокусу, focus:ring-2 для додавання кільця при фокусі та focus:ring-blue-500 для встановлення кольору кільця.

index.html

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

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

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