Tailwind CSS Assignment-2

Basic Questions

  1. Style an h1 with text-3xl, font-bold, and text-blue-600.
  2. Create a p tag with text-sm, leading-relaxed, and tracking-wide.
  3. Make a div with bg-yellow-200 and p-6.
  4. Add margin m-4 to a card container.
  5. Create two divs side by side using flex and gap-4.
  6. Style text as uppercase, bold, and tracking-widest.
  7. Apply mx-auto max-w-md to center a block.
  8. Create a div with w-40 h-40 bg-red-400.
  9. Add padding px-8 py-4 to a button.
  10. Make text italic text-green-700 for a quote.
  11. Create a div with flex flex-col items-center.
  12. Use grid grid-cols-2 gap-4 for a gallery.
  13. Create a div with rounded-lg shadow-md p-6.
  14. Add overflow-auto h-32 to a text block.
  15. Style heading with text-4xl font-extrabold tracking-tight.
  16. Use justify-between in flex for nav items.
  17. Create div with h-20 w-20 bg-blue-500 rounded-full.
  18. Apply my-6 to separate two sections.
  19. Create button with bg-indigo-500 hover:bg-indigo-700 text-white px-6 py-2.
  20. Add min-w-[200px] to prevent container from shrinking.

 Intermediate Questions

  1. Create text with text-lg font-light leading-loose text-gray-600.
  2. Build responsive heading: text-xl sm:text-2xl md:text-4xl.
  3. Use tracking-tight for a compact heading style.
  4. Create alert box with bg-red-100 border-l-4 border-red-500 p-4.
  5. Add mx-10 my-6 spacing to a container.
  6. Use px-12 py-8 to style a large button.
  7. Build nav with flex justify-around items-center.
  8. Create grid grid-cols-3 gap-6 for products.
  9. Make one grid item span two columns using col-span-2.
  10. Add responsive grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-4.
  11. Style card with max-w-sm mx-auto p-6 bg-white shadow-lg.
  12. Use overflow-hidden on an image container.
  13. Apply min-h-screen flex items-center justify-center.
  14. Create flexbox gap-8 to add spacing between child elements.
  15. Use h-64 w-full object-cover for image styling.
  16. Build footer with py-10 px-4 bg-gray-800 text-gray-200.
  17. Apply leading-tight tracking-wide to a blockquote.
  18. Use flex-col md:flex-row for responsive layout.
  19. Create profile card with w-60 h-80 bg-gray-100 p-4.
  20. Build chat container with h-96 overflow-y-scroll border.

 Advanced Questions

  1. Create a responsive hero section with min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-500 to-pink-500.
  2. Build a grid layout with 5 columns, where 1st column is wider using grid-cols-5 col-span-2.
  3. Create fluid container using w-full max-w-5xl mx-auto px-6.
  4. Build responsive card group using grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-10.
  5. Create flexbox layout that evenly distributes items using justify-evenly items-start.
  6. Add text with responsive spacing: leading-relaxed sm:leading-loose md:leading-snug.
  7. Build scrollable sidebar with h-screen w-64 overflow-y-auto bg-gray-900 text-white.
  8. Create dynamic button using px-4 py-2 bg-blue-500 text-white rounded hover:scale-105 transition.
  9. Build sticky header with sticky top-0 bg-white shadow z-50.
  10. Create full-page responsive dashboard with grid grid-cols-12 gap-6, sidebar (col-span-3), and content (col-span-9).