스킬 frontend

React Tailwind CSS 헤더

Tailwind CSS로 React 헤더 컴포넌트 만듦. 반응형 처리함.

reacttailwind-cssfrontendheaderresponsive

Tailwind CSS React 헤더

import * as React from "react";
import { Link } from "react-router-dom";

function HeaderComponent() {
  return (
    <div className="flex flex-col md:flex-row justify-between items-center shadow-sm bg-white p-5">
      <Link to="/main" className="flex items-center gap-2 mb-4 md:mb-0">
        <div className="bg-black bg-opacity-10 w-10 h-10 rounded-[100px]" />
        <div className="text-black text-3xl font-medium leading-9">
          My Portfolio
        </div>
      </Link>
      <div className="flex gap-5">
        <Link to="/about" className="text-black text-base leading-6">About</Link>
        <Link to="/projects" className="text-black text-base leading-6">Projects</Link>
        <Link to="/contact" className="text-black text-base leading-6">Contact</Link>
      </div>
    </div>
  );
}

export default HeaderComponent;

React Link 컴포넌트 사용해서 헤더 만듦. Tailwind CSS 클래스 적용함. - flex-col md:flex-row: 모바일 세로, 데스크탑 가로 정렬. - mb-4 md:mb-0: 모바일 하단 마진, 데스크탑은 없앰. - justify-between, items-center: 양 끝 정렬, 세로 중앙 맞춤. - shadow-sm, bg-white, p-5: 기본 스타일링.

여기서 배울 것

React에서 Tailwind CSS 클래스 쓰는 법.
`react-router-dom` `Link` 컴포넌트 활용.
Tailwind CSS 반응형 클래스 (`md:`) 적용.
Flexbox 유틸리티 클래스로 레이아웃 잡기.

원본 파일 보기 (.claude/skills/tn-tailwind-css-header/SKILL.md)

---
name: Tailwind CSS React 헤더 컴포넌트
description: Use when the user asks to create a responsive header component for a React application, styled with Tailwind CSS, including a logo and navigation links.
version: 1.0.0
source: /home/son/prj/resume/backup_notes_260317/notion/Tech Note/Tailwind CSS Header d65dd10dcc094a709c39d4aca7d0efe6.md
---

# Tailwind CSS Header

import * as React from "react";
import { Link } from "react-router-dom";

function HeaderComponent() {
return (
<div className="flex justify-between items-center shadow-sm bg-white p-5 max-md:max-w-full max-md:flex-wrap">
<Link to="/main" className="flex items-center gap-2">
<div className="bg-black bg-opacity-10 flex w-10 h-10 rounded-[100px]" />
<div className="text-black text-3xl font-medium leading-9">
My Portfolio
</div>
</Link>

```
  <div className="flex gap-5">
    <Link to="/about" className="text-black text-base leading-6">About</Link>
    <Link to="/projects" className="text-black text-base leading-6">Projects</Link>
    <Link to="/contact" className="text-black text-base leading-6">Contact</Link>
  </div>
</div>

```

);
}

export default HeaderComponent;

**answer :** 

import * as React from "react";
import { Link } from "react-router-dom";

function HeaderComponent() {
return (
<div className="flex flex-col md:flex-row justify-between items-center shadow-sm bg-white p-5">
<Link to="/main" className="flex items-center gap-2 mb-4 md:mb-0">
<div className="bg-black bg-opacity-10 w-10 h-10 rounded-[100px]" />
<div className="text-black text-3xl font-medium leading-9">
My Portfolio
</div>
</Link>

```
  <div className="flex gap-5">
    <Link to="/about" className="text-black text-base leading-6">About</Link>
    <Link to="/projects" className="text-black text-base leading-6">Projects</Link>
    <Link to="/contact" className="text-black text-base leading-6">Contact</Link>
  </div>
</div>

```

);
}

export default HeaderComponent;