ChatGPT와 Next.js 공부
Tailwind CSS로 자주 사용하는 UI 컴포넌트 모음
그랜파 개발자
2025. 5. 14. 10:33
Tailwind CSS로 자주 사용하는 UI 컴포넌트 모음을 소개합니다. 이 컴포넌트들은 HTML + Tailwind 클래스로 쉽게 사용할 수 있고, 복사해서 바로 붙여넣어도 잘 작동합니다.
🎯 1. 버튼 (Button)
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
기본 버튼
</button>- 색상, hover, 둥근 테두리 등 간단한 커스터마이징 가능
📦 2. 카드 (Card)
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<img class="w-full" src="https://via.placeholder.com/300" alt="Card Image">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">카드 제목</div>
<p class="text-gray-700 text-base">카드 설명 텍스트입니다.</p>
</div>
</div>🔍 3. 입력 필드 (Input)
<input type="text" placeholder="내용을 입력하세요"
class="w-full border border-gray-300 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400" />✅ 4. 체크박스 / 라디오
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox text-blue-600">
<span class="ml-2">동의합니다</span>
</label><label class="inline-flex items-center">
<input type="radio" name="option" class="form-radio text-green-500">
<span class="ml-2">옵션 1</span>
</label>📄 5. 모달 (Modal)
<!-- 배경 -->
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<!-- 모달 본체 -->
<div class="bg-white p-6 rounded shadow-lg max-w-md w-full">
<h2 class="text-xl font-bold mb-4">모달 제목</h2>
<p class="text-gray-700 mb-4">모달 내용입니다.</p>
<div class="text-right">
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">확인</button>
</div>
</div>
</div>이 모달은 조건부 렌더링이나 Alpine.js, Vue 등과 함께 쓰면 좋습니다.
🔄 6. 로딩 스피너
<div class="flex items-center justify-center">
<div class="w-6 h-6 border-4 border-blue-400 border-t-transparent border-solid rounded-full animate-spin"></div>
</div>📱 7. 네비게이션 바 (NavBar)
<nav class="bg-white shadow-md">
<div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
<div class="text-xl font-bold text-blue-600">로고</div>
<div class="space-x-4">
<a href="#" class="text-gray-700 hover:text-blue-600">홈</a>
<a href="#" class="text-gray-700 hover:text-blue-600">소개</a>
<a href="#" class="text-gray-700 hover:text-blue-600">문의</a>
</div>
</div>
</nav>🔔 8. 알림 박스 (Alert)
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
<strong class="font-bold">성공!</strong>
<span class="block sm:inline">작업이 성공적으로 완료되었습니다.</span>
</div>🧾 9. 탭 (Tabs)
<div class="flex space-x-4 border-b">
<button class="py-2 px-4 border-b-2 border-blue-600 font-semibold text-blue-600">탭1</button>
<button class="py-2 px-4 text-gray-500 hover:text-blue-600">탭2</button>
<button class="py-2 px-4 text-gray-500 hover:text-blue-600">탭3</button>
</div>🧱 10. Grid 레이아웃
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-100 p-4 rounded">1번 박스</div>
<div class="bg-gray-100 p-4 rounded">2번 박스</div>
<div class="bg-gray-100 p-4 rounded">3번 박스</div>
</div>📦 보너스: 컴포넌트 라이브러리 추천
Tailwind로 만들어진 UI 라이브러리도 존재합니다:
- 🌟 DaisyUI – Tailwind를 위한 UI 컴포넌트 모음
- 🧱 Flowbite – 다양한 반응형 컴포넌트 제공
- 💎 Tailwind UI – Tailwind 제작자의 공식 유료 컴포넌트
원하신다면 위 컴포넌트들을 Vue, React 등에 맞게 변환해드리거나, 실전 프로젝트 구조에 맞춰 예제 프로젝트도 제작해드릴 수 있어요. 어떤 방향이 더 필요하신가요?
나의 말:
React에 맞게 변환
ChatGPT의 말:
좋아요! 위에서 소개한 Tailwind CSS 컴포넌트들을 React JSX 문법에 맞게 변환해드릴게요. 아래는 자주 사용하는 UI 컴포넌트를 React로 작성한 예제입니다.
📦 1. Button (버튼)
const Button = () => {
return (
<button className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
기본 버튼
</button>
);
};📄 2. Card (카드)
const Card = () => {
return (
<div className="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<img
className="w-full"
src="https://via.placeholder.com/300"
alt="Card"
/>
<div className="px-6 py-4">
<div className="font-bold text-xl mb-2">카드 제목</div>
<p className="text-gray-700 text-base">
카드 설명 텍스트입니다.
</p>
</div>
</div>
);
};🧾 3. Input 필드
const Input = () => {
return (
<input
type="text"
placeholder="내용을 입력하세요"
className="w-full border border-gray-300 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-400"
/>
);
};✅ 4. Checkbox / Radio
const Checkbox = () => {
return (
<label className="inline-flex items-center">
<input type="checkbox" className="form-checkbox text-blue-600" />
<span className="ml-2">동의합니다</span>
</label>
);
};
const Radio = () => {
return (
<label className="inline-flex items-center">
<input type="radio" name="option" className="form-radio text-green-500" />
<span className="ml-2">옵션 1</span>
</label>
);
};📱 5. Navbar (네비게이션 바)
const Navbar = () => {
return (
<nav className="bg-white shadow-md">
<div className="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center">
<div className="text-xl font-bold text-blue-600">로고</div>
<div className="space-x-4">
<a href="#" className="text-gray-700 hover:text-blue-600">홈</a>
<a href="#" className="text-gray-700 hover:text-blue-600">소개</a>
<a href="#" className="text-gray-700 hover:text-blue-600">문의</a>
</div>
</div>
</nav>
);
};🪄 6. Modal (모달)
const Modal = ({ onClose }) => {
return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white p-6 rounded shadow-lg max-w-md w-full">
<h2 className="text-xl font-bold mb-4">모달 제목</h2>
<p className="text-gray-700 mb-4">모달 내용입니다.</p>
<div className="text-right">
<button
onClick={onClose}
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
확인
</button>
</div>
</div>
</div>
);
};🔄 7. Spinner (로딩 스피너)
const Spinner = () => {
return (
<div className="flex items-center justify-center">
<div className="w-6 h-6 border-4 border-blue-400 border-t-transparent border-solid rounded-full animate-spin"></div>
</div>
);
};🧱 8. Grid 레이아웃
const GridLayout = () => {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="bg-gray-100 p-4 rounded">1번 박스</div>
<div className="bg-gray-100 p-4 rounded">2번 박스</div>
<div className="bg-gray-100 p-4 rounded">3번 박스</div>
</div>
);
};⚙️ 참고: 프로젝트에 Tailwind 적용하기 (React + Vite 기준)
npm create vite@latest my-app --template react
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p- tailwind.config.js:
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}- src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;- main.jsx에서 index.css import:
import './index.css';