Tailwind - Table 테이블

import React from 'react' import MainLayout from '../../layouts/MainLayout' const Table = () => { return ( <MainLayout> <div className="sm:p-24 px-4 py-12 flex flex-col justify-center items-center"> <h3 className="pb-10 font-bold text-4xl"> Table </h3> <div className="inline-block min-w-full shadow-md rounded-lg overflow-hidden"> <table className="min-w-full leading-normal"> <thead> <tr> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider" > 고객명 </th> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider hidden md:table-cell" > 전화번호 / 이메일 </th> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider hidden md:table-cell" > 가입 일자 </th> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider hidden sm:table-cell" > 상태 </th> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right" ></th> </tr> </thead> <tbody> <tr> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <div className="flex"> <div className="flex-shrink-0 w-10 h-10"> <img className="w-full h-full rounded-full border" src="https://i.imgur.com/CbuD3gl.png" alt="" /> </div> <div className="ml-3"> <p className="text-gray-900 whitespace-no-wrap"> 알로하 </p> <p className="text-gray-600 whitespace-no-wrap hidden md:block">Lv.100</p> </div> </div> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell"> <p className="text-gray-900 whitespace-no-wrap">010-0000-0000</p> <p className="text-gray-600 whitespace-no-wrap">wwwaloha@kakao.com</p> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell"> <p className="text-gray-900 whitespace-no-wrap">2025/01/01</p> <p className="text-gray-600 whitespace-no-wrap">3 일전</p> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden sm:table-cell"> <span className="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight" > <span aria-hidden className="absolute inset-0 bg-green-200 opacity-50 rounded-full" ></span> <span className="relative">활동중</span> </span> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right" > <button type="button" className="inline-block text-gray-500 hover:text-gray-700" > <svg className="inline-block h-6 w-6 fill-current" viewBox="0 0 24 24" > <path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z" /> </svg> </button> </td> </tr> <tr> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <div className="flex"> <div className="flex-shrink-0 w-10 h-10"> <img className="w-full h-full rounded-full border" src="https://i.imgur.com/PqgZlA0.png" alt="" /> </div> <div className="ml-3"> <p className="text-gray-900 whitespace-no-wrap"> 김조은 </p> <p className="text-gray-600 whitespace-no-wrap hidden md:block">Lv.50</p> </div> </div> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell"> <p className="text-gray-900 whitespace-no-wrap">010-0000-0000</p> <p className="text-gray-600 whitespace-no-wrap">wwwaloha@kakao.com</p> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell"> <p className="text-gray-900 whitespace-no-wrap">2025/01/01</p> <p className="text-gray-600 whitespace-no-wrap">3 일전</p> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden sm:table-cell"> <span className="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight" > <span aria-hidden className="absolute inset-0 bg-green-200 opacity-50 rounded-full" ></span> <span className="relative">활동중</span> </span> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right" > <button type="button" className="inline-block text-gray-500 hover:text-gray-700" > <svg className="inline-block h-6 w-6 fill-current" viewBox="0 0 24 24" > <path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z" /> </svg> </button> </td> </tr> <tr> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <div className="flex"> <div className="flex-shrink-0 w-10 h-10"> <img className="w-full h-full rounded-full border" src="https://i.imgur.com/vmkZm6D.png" alt="" /> </div> <div className="ml-3"> <p className="text-gray-900 whitespace-no-wrap"> 신준수 </p> <p className="text-gray-600 whitespace-no-wrap hidden md:block">Lv.1</p> </div> </div> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell"> <p className="text-gray-900 whitespace-no-wrap">010-0000-0000</p> <p className="text-gray-600 whitespace-no-wrap">wwwaloha@kakao.com</p> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell"> <p className="text-gray-900 whitespace-no-wrap">2025/01/01</p> <p className="text-gray-600 whitespace-no-wrap">3 일전</p> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden sm:table-cell"> <span className="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight" > <span aria-hidden className="absolute inset-0 bg-orange-200 opacity-50 rounded-full" ></span> <span className="relative">대기중</span> </span> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right" > <button type="button" className="inline-block text-gray-500 hover:text-gray-700" > <svg className="inline-block h-6 w-6 fill-current" viewBox="0 0 24 24" > <path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z" /> </svg> </button> </td> </tr> <tr> <td className="px-5 py-5 bg-white text-sm"> <div className="flex"> <div className="flex-shrink-0 w-10 h-10"> <img className="w-full h-full rounded-full border" src="https://i.imgur.com/OD1a0Mv.png" alt="" /> </div> <div className="ml-3"> <p className="text-gray-900 whitespace-no-wrap"> 구교찬 </p> <p className="text-gray-600 whitespace-no-wrap hidden md:block">Lv.5</p> </div> </div> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell"> <p className="text-gray-900 whitespace-no-wrap">010-0000-0000</p> <p className="text-gray-600 whitespace-no-wrap">wwwaloha@kakao.com</p> </td> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm hidden md:table-cell"> <p className="text-gray-900 whitespace-no-wrap">2025/01/01</p> <p className="text-gray-600 whitespace-no-wrap">3 일전</p> </td> <td className="px-5 py-5 bg-white text-sm hidden sm:table-cell"> <span className="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight" > <span aria-hidden className="absolute inset-0 bg-red-200 opacity-50 rounded-full" ></span> <span className="relative">비활성화</span> </span> </td> <td className="px-5 py-5 bg-white text-sm text-right"> <button type="button" className="inline-block text-gray-500 hover:text-gray-700" > <svg className="inline-block h-6 w-6 fill-current" viewBox="0 0 24 24" > <path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z" /> </svg> </button> </td> </tr> </tbody> </table> </div> </div> </MainLayout> ) } export default Table

<thead> <tr> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider" > 고객명 </th> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider hidden md:table-cell" > 전화번호 / 이메일 </th> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider hidden md:table-cell" > 가입 일자 </th> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider ' hidden sm:table-cell" > 상태 </th> <th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right" ></th> </tr> </thead>

<th className="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider ' hidden sm:table-cell" > 상태 </th>