Tailwind CSS

Outcome：Complete the task with Tailwind CSS (Tailwind CSS)。 User context：팀은 반응형 간격과 포커스 상태에 공유 토큰을 사용해. 같은 패턴이 반복되면 하나의 컴포넌트로 뽑아내. Technology or engineering concept：Tailwind CSS (Tailwind CSS)。 Why it fits：유틸리티 클래스가 팀 규칙에 맞고, 빌드가 모든 클래스 소스를 찾을 수 있을 때 사용하세요. Do not use it when：곳곳에 아무렇게나 정한 값과 너무 동적이라서 알아챌 수 없는 클래스 이름은 피하세요. 반복되는 마크업은 컴포넌트로 만들어야 할 수도 있어요. Engineering fit: Define where it runs and which version to use. Set its job, interfaces, data flow, dependencies, supported systems, security, and speed limits. Explain how it fits the current stack. Lifecycle safeguards: Check dependency health and licenses. Add monitoring and a fallback. Name the upgrade owner. Do not add a second tool for the same job without a measured benefit. Acceptance criteria: A small integration proves the needed behavior. Test compatibility, security, failure, and performance. Document deploy, upgrade, support, and rollback steps. Evidence and limits (evidence boundary)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Current stack, runtime and version rules, target systems, dependency owner, performance budget, support period, and migration limits.