Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Buttons | Building Basic Components
Tailwind CSS for Web Development
course content

Course Content

Tailwind CSS for Web Development

Tailwind CSS for Web Development

1. Introduction and Setup
2. Core Concepts and Basic Styling
3. Building Basic Components
4. Layout Basics
5. Responsiveness and Customization

bookChallenge: Buttons

Task

Using Tailwind CSS, create a button that meets the following requirements:

  1. The button should have a blue background (e.g. bg-blue-500);
  2. When hovered over, the background color should change to a darker shade of blue (e.g. bg-blue-700);
  3. When focused, the button should have a yellow background color (e.g., bg-yellow-500);
  4. When active (pressed), the background color should change to an even darker shade of blue (e.g. bg-blue-900);
  5. When disabled, the button should appear with 50% opacity and a cursor that indicates it is not clickable.
html

index

css

index

js

index

copy
  • Use hover:bg-blue-700 for hover state;
  • Use focus:bg-yellow-500 for focus state;
  • Use active:bg-blue-900 for active state;
  • Use opacity-50 cursor-not-allowed for disabled state.
html

index

css

index

js

index

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 3. Chapter 2
some-alt