🧩 Front-End CSS & Tailwind Quick Notes for Interviews

🧑‍🤝‍🧑 Avatars

• flex → arranges avatars horizontally
• -space-x-1 → creates slight overlap between avatars
• overflow-hidden → hides the overflow to keep edges clean
• relative + absolute → parent sets position context; child (dot) fixed in a corner
• outline → simple line border
• ring → shadow-based border with adjustable thickness (ring-2 ring-white)
• dark: prefix → applies dark mode styles (class="dark" or media query)

🧠 Key idea:

flex = layout, relative = positioning, dark: = theme switch

🏷️ Badges

• inline-flex + items-center → inline behavior + vertical centering
• rounded-md → rectangular with soft corners
• rounded-full → fully pill-shaped
• “With border” → uses ring-1 ring-inset for subtle depth
• “Flat” → no border, clean minimalist look
• group-hover: → enables hover effect sharing between parent & child
• Status dot → <span> + <svg> + color class (fill-green-500)

🧠 Comparison notes:

border = depth / separation flat = clean / minimal rounded-full = pill shape inline-flex = inline + flex alignment

🔽 Dropdowns

<div>
  <button>Menu <svg>▼</svg></button>
  <div>
    <a>Item</a>
    <form><button>Sign out</button></form>
  </div>
</div>

• <a> → navigation behavior
• <select> → form selection behavior
• divide-y → adds separators
• parent uses relative, dropdown uses absolute

🧠 Pattern:

Dropdown = relative parent + absolute panel

🔘 Buttons

<button class="inline-flex items-center gap-2 rounded-md bg-indigo-600 text-white">
  <svg></svg> Button
</button>

• Primary → main action
• Secondary → neutral / outline action
• Soft → low-emphasis background
• Circular → icon-only button (rounded-full)

🧠 Tip:

<button> is semantic and focusable. Don’t use <a> for button behavior.

🔔 Notifications & Alerts

Structure layers:

fixed inset-0 → screen container
flex-col → notification stack
white rounded box → single notification card
contains: icon + text + close button

🧠 Quick diff:

Alert = interruptive Notification = informative flex = layout, shadow = elevation

📍 Positioning

🧠 Mnemonic:

static (still), relative (slightly moved), absolute (floats), fixed (stays), sticky (half-fixed)

🧭 Navigation / Pagination

<nav>
  <ul class="flex gap-2">
    <li><a>1</a></li>
    <li><a class="bg-accent/10 font-semibold">2</a></li>
  </ul>
</nav>

• flex distributes page numbers horizontally
• bg-accent/10 marks current page

🧠 Common question:

How to build pagination layout with flex and border utilities.

🪟 Modal Dialogs

<div class="fixed inset-0 flex items-center justify-center bg-black/30">
  <div class="bg-white rounded-lg p-6 shadow-lg">
    <h2>Title</h2>
    <p>Content</p>
    <div class="flex justify-end gap-2">
      <button>Cancel</button>
      <button>Confirm</button>
    </div>
  </div>
</div>

• Background layer → fixed
• Content box → shadow + rounded
• Buttons → aligned right via justify-end

🧠 Tip:

Use flex for centering both vertically and horizontally.

🧱 Semantic HTML

🧠 Interview point:

Use semantic tags based on content type (list, table, or key-value).

📝 Forms & Inputs

Attribute meanings:

🧠 Common mistake:

Radios in the same group must share the same name to be mutually exclusive.

⚙️ Tailwind Core Interview Concepts

💡 Recap (for quick review)

• Flex arranges, Relative positions, Ring adds depth.
• Inline-flex for inline alignment, Rounded-full = pill shape.
• Dark: toggles theme, Group-hover shares hover states.
• Alert blocks, Notification floats.
• <dl> = key-value pair, <ul> = list.
• Radios share name, Checkboxes don’t.