Tailwind - Card

tailwind 로 Card UI 를 만들어 봅니다.

•

카드뷰

•

기본 카드

•

이미지 카드

•

반응형 카드

카드뷰

const ProductCard = ({ image, title, description, price, bgColor, btnColor }) => {
  return (
    <div className="w-full md:w-1/2 lg:w-1/4 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2">
      <div className="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300">
        <figure className="mb-2">
          <img src={image} alt={title} className="h-64 ml-auto mr-auto" />
        </figure>
        <div className={`rounded-lg p-4 ${bgColor} flex flex-col`}>
          <div>
            <h5 className="text-white text-2xl font-bold leading-none">
              {title}
            </h5>
            <span className="text-xs text-gray-400 leading-none">{description}</span>
          </div>
          <div className="flex items-center">
            <div className="text-lg text-white font-light">
              {price}
            </div>
            <button
              href="javascript:;"
              className={`rounded-full ${btnColor} text-white hover:bg-white hover:text-purple-900 hover:shadow-xl focus:outline-none w-10 h-10 flex ml-auto transition duration-300`}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="stroke-current m-auto"
              >
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

const CardView = () => {
  const products = [
    {
      image: "https://i.imgur.com/CbuD3gl.png",
      title: "ALOHA CLASS 상품01",
      description: "첫 번째 상품 설명입니다.",
      price: "₩100,000",
      bgColor: "bg-blue-700",
      btnColor: "bg-blue-900"
    },
    {
      image: "https://i.imgur.com/PqgZlA0.png",
      title: "ALOHA CLASS 상품02",
      description: "두 번째 상품 설명입니다.",
      price: "₩150,000",
      bgColor: "bg-blue-600",
      btnColor: "bg-blue-800"
    },
    {
      image: "https://i.imgur.com/vmkZm6D.png",
      title: "ALOHA CLASS 상품03",
      description: "세 번째 상품 설명입니다.",
      price: "₩130,000",
      bgColor: "bg-blue-700",
      btnColor: "bg-blue-900"
    },
    {
      image: "https://i.imgur.com/OD1a0Mv.png",
      title: "ALOHA CLASS 상품04",
      description: "네 번째 상품 설명입니다.",
      price: "₩8  0,000",
      bgColor: "bg-blue-600",
      btnColor: "bg-blue-800"
    }
  ];

  return (
    <div className="flex items-center min-h-screen">
      <div className="container flex flex-wrap items-start">
        <div className="w-full pl-5 lg:pl-2 mb-4 mt-4">
          <h1 className="text-3xl lg:text-4xl text-gray-700 font-extrabold">
            상품 카드뷰
          </h1>
        </div>
        {products.map((product, index) => (
          <ProductCard
            key={index}
            image={product.image}
            title={product.title}
            description={product.description}
            price={product.price}
            bgColor={product.bgColor}
            btnColor={product.btnColor}
          />
        ))}
      </div>
    </div>
  );
};
JavaScript
복사

기본 카드

<div className="p-20">
  <h3 className="text-blue-300 mb-4 text-sm font-bold">
    1. 기본 카드
  </h3>
  <div className="bg-white p-6 rounded-lg shadow-lg">
    <h2 className="text-2xl font-bold mb-2 text-gray-800">기본 카드</h2>
    <p className="text-gray-700">안녕하세요! 기본 카드 내용입니다.</p>
  </div>
</div>
JavaScript
복사

이미지 카드

<div className="p-20 w-full md:w-1/2">
  <h3 className="text-purple-300 font-bold mb-4">
    2. 이미지 카드
  </h3>
  <div className="bg-white rounded-lg shadow-lg">
    <img
      src="https://i.imgur.com/WQSDePO.png"
      alt=""
      className="rounded-t-lg"
    />
    <div className="p-6">
      <h2 className="font-bold mb-2 text-2xl text-purple-800">이미지 카드</h2>
      <p className="text-purple-700 mb-2">안녕하세요! 기본 카드 내용입니다.</p>
      <a href="#" className="text-purple-600 hover:text-purple-500 underline text-sm">더보기</a>
    </div>
  </div>
</div>
JavaScript
복사

반응형 카드

<div className="p-20">
  <h3 className="text-orange-400 font-bold mb-4">3. 반응형 카드</h3>
  <div className="bg-white rounded-lg shadow-2xl md:flex">
    <img
      src="https://i.imgur.com/WQSDePO.png"
      alt="Laptop on Desk"
      className="md:w-1/3 rounded-t-lg md:rounded-l-lg md:rounded-t-none"
    />
    <div className="p-6">
      <h2 className="font-bold text-xl md:text-3xl mb-2 text-orange-700">반응형 카드</h2>
      <p className="text-orange-700">넓을 땐 가로! 좁을 땐 세로!</p>
    </div>
  </div>
</div>
JavaScript
복사

전체 코드

•

Card.jsx

import React from 'react';
import MainLayout from '../../layouts/MainLayout';


const ProductCard = ({ image, title, description, price, bgColor, btnColor }) => {
  return (
    <div className="w-full md:w-1/2 lg:w-1/4 pl-5 pr-5 mb-5 lg:pl-2 lg:pr-2">
      <div className="bg-white rounded-lg m-h-64 p-2 transform hover:translate-y-2 hover:shadow-xl transition duration-300">
        <figure className="mb-2">
          <img src={image} alt={title} className="h-64 ml-auto mr-auto" />
        </figure>
        <div className={`rounded-lg p-4 ${bgColor} flex flex-col`}>
          <div>
            <h5 className="text-white text-2xl font-bold leading-none">
              {title}
            </h5>
            <span className="text-xs text-gray-400 leading-none">{description}</span>
          </div>
          <div className="flex items-center">
            <div className="text-lg text-white font-light">
              {price}
            </div>
            <button
              href="javascript:;"
              className={`rounded-full ${btnColor} text-white hover:bg-white hover:text-purple-900 hover:shadow-xl focus:outline-none w-10 h-10 flex ml-auto transition duration-300`}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="stroke-current m-auto"
              >
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

const CardView = () => {
  const products = [
    {
      image: "https://i.imgur.com/CbuD3gl.png",
      title: "ALOHA CLASS 상품01",
      description: "첫 번째 상품 설명입니다.",
      price: "₩100,000",
      bgColor: "bg-blue-700",
      btnColor: "bg-blue-900"
    },
    {
      image: "https://i.imgur.com/PqgZlA0.png",
      title: "ALOHA CLASS 상품02",
      description: "두 번째 상품 설명입니다.",
      price: "₩150,000",
      bgColor: "bg-blue-600",
      btnColor: "bg-blue-800"
    },
    {
      image: "https://i.imgur.com/vmkZm6D.png",
      title: "ALOHA CLASS 상품03",
      description: "세 번째 상품 설명입니다.",
      price: "₩130,000",
      bgColor: "bg-blue-700",
      btnColor: "bg-blue-900"
    },
    {
      image: "https://i.imgur.com/OD1a0Mv.png",
      title: "ALOHA CLASS 상품04",
      description: "네 번째 상품 설명입니다.",
      price: "₩8  0,000",
      bgColor: "bg-blue-600",
      btnColor: "bg-blue-800"
    }
  ];

  return (
    <div className="flex items-center min-h-screen">
      <div className="container flex flex-wrap items-start">
        <div className="w-full pl-5 lg:pl-2 mb-4 mt-4">
          <h1 className="text-3xl lg:text-4xl text-gray-700 font-extrabold">
            상품 카드뷰
          </h1>
        </div>
        {products.map((product, index) => (
          <ProductCard
            key={index}
            image={product.image}
            title={product.title}
            description={product.description}
            price={product.price}
            bgColor={product.bgColor}
            btnColor={product.btnColor}
          />
        ))}
      </div>
    </div>
  );
};


const Card = () => {
  return (
    <MainLayout>
      <>
        <CardView />
        <div className="p-20">
          <h3 className="text-blue-300 mb-4 text-sm font-bold">
            1. 기본 카드
          </h3>
          <div className="bg-white p-6 rounded-lg shadow-lg">
            <h2 className="text-2xl font-bold mb-2 text-gray-800">기본 카드</h2>
            <p className="text-gray-700">안녕하세요! 기본 카드 내용입니다.</p>
          </div>
        </div>

        <div className="p-20 w-full md:w-1/2">
          <h3 className="text-purple-300 font-bold mb-4">
            2. 이미지 카드
          </h3>
          <div className="bg-white rounded-lg shadow-lg">
            <img
              src="https://i.imgur.com/WQSDePO.png"
              alt=""
              className="rounded-t-lg"
            />
            <div className="p-6">
              <h2 className="font-bold mb-2 text-2xl text-purple-800">이미지 카드</h2>
              <p className="text-purple-700 mb-2">안녕하세요! 기본 카드 내용입니다.</p>
              <a href="#" className="text-purple-600 hover:text-purple-500 underline text-sm">더보기</a>
            </div>
          </div>
        </div>

        <div className="p-20">
          <h3 className="text-orange-400 font-bold mb-4">3. 반응형 카드</h3>
          <div className="bg-white rounded-lg shadow-2xl md:flex">
            <img
              src="https://i.imgur.com/WQSDePO.png"
              alt="Laptop on Desk"
              className="md:w-1/3 rounded-t-lg md:rounded-l-lg md:rounded-t-none"
            />
            <div className="p-6">
              <h2 className="font-bold text-xl md:text-3xl mb-2 text-orange-700">반응형 카드</h2>
              <p className="text-orange-700">넓을 땐 가로! 좁을 땐 세로!</p>
            </div>
          </div>
        </div>
      
      </>
    </MainLayout>
  );
}

export default Card;
JavaScript
복사