Exercise:

Create a simple webpage with a micro interaction using TailwindCSS and ensure it's fully responsive.

Steps:

  • Create HTML elements for the main content, such as a container, header, and footer.
  • Style these elements using TailwindCSS classes to establish a basic layout.
  • Choose a micro interaction effect (e.g., hover animation for a button - changes color or size)
  • Utilize TailwindCSS's responsive modifiers (e.g., sm:, md:, lg:) to adjust styles based on screen size.
  • Test your website on different devices and screen sizes to ensure it adapts properly.

Practice Exercises:

  1. Create a table to display job listings with the following columns: Job Title, Company, Location, and Application Deadline.

  2. Create a simple photo ghallery using grid display.

  3. Design a navigation bar for a college website using flex layout.