In this lesson, we’d like to add a call-to-action to our pricing Card component to invite our users to take action. To do this, we’ll need to build an appealing button that will do just that.

We’ll see how to color and size our button, but also we’ll see how to style its hover and focus states with Tailwind utility classes.

Some classes we will use:

  • w-full, py-4, and px-8 for adjusting the button’s size
  • bg-white and text-indigo-600 to adjust the colors
  • text-lg and whitespace-nowrap to adjust the look of the button’s text
  • the hover: and focus: variants to adjust the different states of the button
  • and more…

#css #react

Design A Call to Action Button with Tailwind CSS - #5
2.25 GEEK