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

Завдання

Використовуючи Tailwind CSS, створіть кнопку, яка відповідає наступним вимогам:

Кнопка повинна мати синій фон (наприклад, bg-blue-500);
При наведенні курсору фон змінюється на темніший відтінок синього (наприклад, bg-blue-700);
При фокусі кнопка повинна мати жовтий фон (наприклад, bg-yellow-500);
При натисканні (активному стані) фон змінюється на ще темніший відтінок синього (наприклад, bg-blue-900);
У вимкненому стані кнопка повинна мати прозорість 50% та курсор, який вказує на те, що вона неактивна.

index.html

index.html

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

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

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

Запитати АІ

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

Suggested prompts:

Can you show me the complete HTML code for the button using Tailwind CSS?

How do I make the button disabled using Tailwind classes?

Can you explain how to combine these Tailwind classes for all the required states?

Completion rate improved to 3.57

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

Використовуючи Tailwind CSS, створіть кнопку, яка відповідає наступним вимогам:

Кнопка повинна мати синій фон (наприклад, bg-blue-500);
При наведенні курсору фон змінюється на темніший відтінок синього (наприклад, bg-blue-700);
При фокусі кнопка повинна мати жовтий фон (наприклад, bg-yellow-500);
При натисканні (активному стані) фон змінюється на ще темніший відтінок синього (наприклад, bg-blue-900);
У вимкненому стані кнопка повинна мати прозорість 50% та курсор, який вказує на те, що вона неактивна.

index.html

index.html

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

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

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