admin template
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Admin Template</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
/>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<div class="flex h-screen">
<aside
id="sidebar"
class="bg-gray-800 w-64 text-white py-7 px-2 space-y-6 z-10 inset-y-0 left-0 -translate-x-full lg:translate-x-0 absolute lg:relative transition duration-200"
>
<div class="flex justify-between items-center px-4 mb-6">
<h2 class="text-2xl font-semibold">대시보드</h2>
<button id="closeSidebar" class="text-white lg:hidden">
<i class="fas fa-times"></i>
</button>
</div>
<nav class="flex flex-col">
<a
href="#"
class="mb-2 py-2.5 px-4 hover:bg-gray-700 rounded transition-colors duration-200"
>
<i class="fas fa-home mr-2"></i>
홈
</a>
<a
href="#"
class="mb-2 py-2.5 px-4 hover:bg-gray-700 rounded transition-colors duration-200"
><i class="fas fa-chart-bar mr-2"></i>분석</a
>
<a
href="#"
class="mb-2 py-2.5 px-4 hover:bg-gray-700 rounded transition-colors duration-200"
><i class="fas fa-tasks mr-2"></i>작업 관리</a
>
<a
href="#"
class="mb-2 py-2.5 px-4 hover:bg-gray-700 rounded transition-colors duration-200"
><i class="fas fa-cog mr-2"></i>설정</a
>
</nav>
</aside>
<div class="flex-1 flex flex-col">
<header
class="flex justify-between items-center px-6 py-2 h-16 bg-white border-b-4 border-indigo-600"
>
<div class="flex items-center">
<button id="sidebarToggle" class="text-gray-500 lg:hidden p-2 mr-4">
<i class="fas fa-bars"></i>
</button>
<div class="relative">
<span class="absolute left-0 inset-y-0 pl-3 flex items-center">
<i class="fas fa-search text-gray-500"></i>
</span>
<input
class="focus:border-indigo-600 h-10 w-64 pl-10 pr-4 rounded-md"
type="text"
placeholder="검색"
/>
</div>
</div>
<div class="flex items-center gap-x-4">
<button class="text-gray-600"><i class="fas fa-bell"></i></button>
<button class="w-8 h-8 rounded-full overflow-hidden">
<img
src="https://api.dicebear.com/9.x/adventurer/svg?seed=Jude"
alt="avatar"
/>
</button>
</div>
</header>
<main class="flex-1 bg-gray-200">
<div class="container mx-auto px-6 py-8">
<h3 class="text-gray-700 text-3xl font-medium">대시보드</h3>
<div
class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
>
<div class="flex items-center bg-white rounded-md px-5 py-6">
<div
class="flex items-center justify-center rounded-full bg-indigo-600 w-12 h-12 bg-opacity-75"
>
<i class="fas fa-users text-white"></i>
</div>
<div class="ml-5">
<h4 class="text-2xl font-semibold text-gray-700">8,282</h4>
<div class="text-gray-500">신규 사용자</div>
</div>
</div>
<div class="flex items-center bg-white rounded-md px-5 py-6">
<div
class="flex items-center justify-center rounded-full bg-green-600 w-12 h-12 bg-opacity-75"
>
<i class="fas fa-users text-white"></i>
</div>
<div class="ml-5">
<h4 class="text-2xl font-semibold text-gray-700">200,521</h4>
<div class="text-gray-500">총 주문</div>
</div>
</div>
<div class="flex items-center bg-white rounded-md px-5 py-6">
<div
class="flex items-center justify-center rounded-full bg-pink-600 w-12 h-12 bg-opacity-75"
>
<i class="fas fa-users text-white"></i>
</div>
<div class="ml-5">
<h4 class="text-2xl font-semibold text-gray-700">215,542</h4>
<div class="text-gray-500">총 수익</div>
</div>
</div>
</div>
<div class="mt-8">
<div
class="shadow rounded-lg overflow-hidden border-b border-gray-200"
>
<table class="w-full">
<thead>
<tr
class="bg-gray-50 text-xs text-left text-gray-500 border-b border-gray-200"
>
<th class="px-6 py-3 font-medium">작업</th>
<th class="px-6 py-3 font-medium">담당자</th>
<th class="px-6 py-3 font-medium">마감일</th>
<th class="px-6 py-3 font-medium">상태</th>
</tr>
</thead>
<tbody class="bg-white text-gray-900 text-sm font-medium">
<tr class="border-b border-gray-200">
<td class="px-6 py-4">새 랜딩 페이지 디자인</td>
<td class="px-6 py-4">김철수</td>
<td class="px-6 py-4">2024-06-30</td>
<td class="px-6 py-4">
<span
class="bg-green-100 text-green-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>진행중</span
>
</td>
</tr>
<tr class="border-b border-gray-200">
<td class="px-6 py-4">브랜드 로고 업데이트</td>
<td class="px-6 py-4">이영희</td>
<td class="px-6 py-4">2024-07-10</td>
<td class="px-6 py-4">
<span
class="bg-yellow-100 text-yellow-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>대기중</span
>
</td>
</tr>
<tr class="border-b border-gray-200">
<td class="px-6 py-4">마케팅 캠페인 기획</td>
<td class="px-6 py-4">박수정</td>
<td class="px-6 py-4">2024-07-15</td>
<td class="px-6 py-4">
<span
class="bg-blue-100 text-blue-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>검토중</span
>
</td>
</tr>
<tr class="border-b border-gray-200">
<td class="px-6 py-4">백엔드 API 개선</td>
<td class="px-6 py-4">정우성</td>
<td class="px-6 py-4">2024-08-01</td>
<td class="px-6 py-4">
<span
class="bg-red-100 text-red-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>지연중</span
>
</td>
</tr>
<tr class="border-b border-gray-200">
<td class="px-6 py-4">사용자 피드백 분석</td>
<td class="px-6 py-4">최민수</td>
<td class="px-6 py-4">2024-08-05</td>
<td class="px-6 py-4">
<span
class="bg-green-100 text-green-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>진행중</span
>
</td>
</tr>
<tr class="border-b border-gray-200">
<td class="px-6 py-4">웹사이트 유지 보수</td>
<td class="px-6 py-4">한지민</td>
<td class="px-6 py-4">2024-08-20</td>
<td class="px-6 py-4">
<span
class="bg-blue-100 text-blue-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>검토중</span
>
</td>
</tr>
<tr class="border-b border-gray-200">
<td class="px-6 py-4">고객 지원 매뉴얼 작성</td>
<td class="px-6 py-4">윤정수</td>
<td class="px-6 py-4">2024-08-25</td>
<td class="px-6 py-4">
<span
class="bg-yellow-100 text-yellow-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>대기중</span
>
</td>
</tr>
<tr class="border-b border-gray-200">
<td class="px-6 py-4">SEO 최적화 작업</td>
<td class="px-6 py-4">박지성</td>
<td class="px-6 py-4">2024-09-05</td>
<td class="px-6 py-4">
<span
class="bg-green-100 text-green-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>진행중</span
>
</td>
</tr>
<tr class="border-b border-gray-200">
<td class="px-6 py-4">모바일 앱 테스트</td>
<td class="px-6 py-4">이혜진</td>
<td class="px-6 py-4">2024-09-10</td>
<td class="px-6 py-4">
<span
class="bg-red-100 text-red-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>지연중</span
>
</td>
</tr>
<tr class="border-b border-gray-200">
<td class="px-6 py-4">신규 기능 개발</td>
<td class="px-6 py-4">박정민</td>
<td class="px-6 py-4">2024-09-15</td>
<td class="px-6 py-4">
<span
class="bg-blue-100 text-blue-800 px-2 py-0.5 text-xs rounded-full font-semibold"
>검토중</span
>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
document.getElementById('sidebarToggle').addEventListener('click', () => {
document
.getElementById('sidebar')
.classList.toggle('-translate-x-full');
});
document.getElementById('closeSidebar').addEventListener('click', () => {
document.getElementById('sidebar').classList.add('-translate-x-full');
});
</script>
</body>
</html>
'202411study' 카테고리의 다른 글
| 1113 Tailwind CSS (0) | 2024.11.13 |
|---|---|
| tailwind css 참고 (0) | 2024.11.12 |
| 참고 깃 (0) | 2024.11.06 |
| 1105 (0) | 2024.11.05 |