Tailwind CSS Assignment-3

Basic Questions

  1. Create a responsive heading: text-2xl sm:text-3xl md:text-5xl.
  2. Style a button with hover:bg-green-600 and active:bg-green-800.
  3. Add focus:ring-2 focus:ring-blue-400 to an input.
  4. Make text gray in light mode but white in dark mode using dark:text-white.
  5. Create a sticky navbar using sticky top-0 bg-gray-900.
  6. Use absolute to position a badge at the top-right corner of a card.
  7. Create a footer fixed at the bottom using fixed bottom-0 w-full bg-black.
  8. Build a responsive grid: grid-cols-1 md:grid-cols-3.
  9. Create a div with w-40 h-40 bg-blue-500 hover:scale-110 transition.
  10. Add hover:rotate-12 effect to an image.
  11. Create a button with disabled:opacity-50 and disabled:cursor-not-allowed.
  12. Use hover:skew-y-6 on a card element.
  13. Add smooth transition: transition duration-500 ease-in-out.
  14. Create a responsive sidebar: hidden md:block w-64 bg-gray-800.
  15. Add hover:underline and focus:text-red-500 to a link.
  16. Build relative parent with absolute child placed at bottom-left corner.
  17. Create button with px-6 py-2 bg-indigo-500 text-white hover:scale-105.
  18. Add animation animate-ping to a notification dot.
  19. Create hover:shadow-xl card with rounded-lg.
  20. Build flex flex-col sm:flex-row gap-6 layout.

 Intermediate Questions

  1. Make a responsive hero section: min-h-screen flex flex-col md:flex-row items-center.
  2. Create dark mode toggle button using dark:bg-gray-900 dark:text-white.
  3. Build grid with grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4.
  4. Use hover:translate-y-2 transition ease-out duration-300 on a card.
  5. Create button with focus:outline-none focus:ring-4 focus:ring-purple-400.
  6. Add active:scale-95 effect when button is pressed.
  7. Build sticky header with sticky top-0 z-50 shadow bg-white.
  8. Add hover:rotate-180 transform duration-700 on an icon.
  9. Create a profile card with hover:shadow-lg transition ease-in-out.
  10. Build relative container with absolutely positioned floating button.
  11. Apply hover:skew-x-3 hover:scale-105 together on an image.
  12. Create grid with one element spanning col-span-2 md:col-span-4.
  13. Build responsive layout flex-col md:flex-row justify-between.
  14. Add dark mode specific border: dark:border-gray-700.
  15. Use hover:opacity-80 focus:opacity-100 for image hover effect.
  16. Build card flip using transform rotate-y-180 hover:rotate-0.
  17. Add hover:translate-x-6 animation to a button.
  18. Create responsive footer: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4.
  19. Apply hover:shadow-2xl transition-all duration-500 to a card.
  20. Add plugin @tailwindcss/line-clamp and clamp text to 2 lines.

 Advanced Questions

  1. Extend Tailwind config to add custom color “brandBlue:#1DA1F2” and use it in a button.
  2. Add custom spacing scale 72:18rem in tailwind.config.js and apply to padding.
  3. Extend Tailwind config with custom font “Poppins” and apply globally.
  4. Create custom animation “wiggle” in config and apply to a button.
  5. Use typography plugin to style article text with prose lg:prose-xl.
  6. Use forms plugin to style input with Tailwind form utilities.
  7. Create custom utility in @layer utilities to add text-shadow.
  8. Build responsive card with custom breakpoints added in config.
  9. Add plugin @tailwindcss/aspect-ratio to make a responsive video container.
  10. Build responsive dashboard layout with custom plugin + dark mode toggle.