본문 바로가기
HTML/CSS

[HTML/CSS]TailwindCSS 카드 컴포넌트 만들기

by teamnova 2023. 11. 7.
728x90

안녕하세요 이번시간에는 TailwindCSS로 카드 컴포넌트를 만드는 예제를 작성해보겠습니다.

1. 프로젝트 초기화 및 TailwindCSS 설치

npm init -y
npm install tailwindcss

 

2. TailwindCSS 설정 파일 생성

npx tailwindcss init

- 위 명령어 결과로 tailwind.config.js 파일 생성

 

3. tailwind.config.js 파일 수정

module.exports = {
  content: ['./**/*.html'], // 프로젝트의 HTML 파일을 대상으로 합니다.
  // 다른 설정들...
}

4. TailwindCSS 스타일 파일 생성

styles.css 파일을 생성한 후, 이 파일 안에 아래의 내용을 추가합니다

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

5. TailwindCSS 빌드

npx tailwindcss build -i styles.css -o output.css

6. 카드 컴포넌트 HTML 생성

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>세련된 카드 컴포넌트</title>
    <link rel="stylesheet" href="output.css" />
  </head>

  <body class="bg-gray-200 flex items-center justify-center min-h-screen">
    <div
      class="bg-white p-6 rounded-lg shadow-xl max-w-sm transition-transform transform hover:scale-105"
    >
      <div class="relative">
        <img
          src="image.jpeg"
          alt="Placeholder Image"
          class="rounded-t-lg mb-4 w-full"
        />
        <div class="absolute bottom-0 bg-black bg-opacity-60 text-white p-3">
          <h3 class="font-semibold">이미지 타이틀</h3>
        </div>
      </div>
      <h2 class="text-2xl mb-2">제목</h2>
      <p class="text-gray-700">여기에 설명을 작성하세요.</p>
      <a
        href="#"
        class="mt-4 inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors duration-300"
        >더 보기</a
      >
    </div>
  </body>
</html>

 

7. 결과