项目初始化

2024-07-25 19:33:25 +08:00
parent 255542ea68
commit 5db7ec3348
11 changed files with 822 additions and 7 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
--- a/.vite/deps_temp_474a67bf/package.json
+++ b/.vite/deps_temp_474a67bf/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 TailAdmin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,101 @@
+# TailAdmin React - Free React Tailwind Admin Dashboard Template
+
+TailAdmin is a free and open-source admin dashboard template built on **React and Tailwind CSS**, providing developers with everything they need to create a comprehensive, data-driven back-end, 
+dashboard, or admin panel solution for upcoming web projects.
+
+[![tailwind react admin template](https://ucarecdn.com/d2a6daed-eb9c-4c2f-8a95-4419c450e23a/tailadminreact.jpg)](https://react-demo.tailadmin.com/)
+
+
+With TailAdmin, you get access to all the necessary dashboard UI components, elements, and pages required to build a feature-rich and complete dashboard or admin panel. Whether you're building dashboard or admin panel for a complex web application or a simple website, TailAdmin is the perfect solution to help you get up and running quickly.
+
+### [✨ Visit Website](https://tailadmin.com/)
+
+### [🚀 PRO Demo](https://react-demo.tailadmin.com/)
+### [🚀 FREE Demo](https://free-react-demo.tailadmin.com/)
+
+### TailAdmin React PRO vs TailAdmin React FREE Comparison 📊
+
+#### [TailAdmin React PRO](https://react-demo.tailadmin.com/)
+- 4 Unique Dashboards: Analytics, Ecommerce, Marketing, and CRM (More will be added)
+- 120+ Dashboard UI Components
+- 200+ Total UI Elements
+- 45+ HTML Files
+- All Essential Elements and Files
+- Full Figma Design Source - As Shown on Demo
+
+___
+
+#### [TailAdmin React FREE](https://free-react-demo.tailadmin.com/)
+- 1 Unique Dashboard
+- 30+ Dashboard UI Components
+- 50+ Total UI Elements 
+- 10+ HTML Files
+- TypeScript Support
+- Basic UI Kit Elements and Files
+- Figma Design Source - Free Sample
+___
+
+### [⬇️ Download Now](https://tailadmin.com/download)
+
+### [⚡ Get PRO Version](https://tailadmin.com/pricing)
+
+### [📄 Documentation/Installation](https://tailadmin.com/docs)
+
+### [🖌️ TailAdmin Figma Free Sample](https://www.figma.com/community/file/1214477970819985778)
+
+### [👉 TailAdmin HTML Version](https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template)
+
+TailAdmin React dashboard template based on Tailwind CSS is a pre-designed starting point for building a web-based dashboard using the React JavaScript library and the Tailwind CSS utility-first framework. This Tailwind CSS + React Dashboard Template - built using Tailwind CSS and **includes pre-built components, such as navigation menus, charts, tables, and forms, which can be easily customized and integrated into a small-to-large React web application**.
+
+If you're looking for a high-quality **React-Tailwind Dashboard, Admin Panel Template, or UI Kit**, TailAdmin will be the perfect choice for you!
+
+## TailAdmin React - Installation
+
+You'll need to install Node.js >=v14.16+ (Recommended Version) (NPM comes along with it) and TailAdmin uses **Vite** for frontend tooling, to peform installation and building production version, please follow these steps from below:
+
+- Use terminal and navigate to the project (tailadmin-react) root.
+
+- Then run : <code>npm install</code>
+
+- Then run : <code>npm run dev</code>
+
+Now, in the browser go to <code>localhost:5173</code>
+
+**For Production Build**
+Run : <code>npm run build</code>
+
+Default build output directory: /dist
+
+This command will generate a dist as build folder in the root of your template that you can upload to your server.
+
+## Tons of React Tailwind Components for Dashboard
+React and Tailwind are two popular technologies that have taken the web development world by storm. React is a JavaScript library for building user interfaces, while Tailwind is a utility-first CSS framework that makes it easy to style web applications. TailAdmin React Offers 200+ Essential React + Tailwind CSS UI Components that you copy-paste and use with your dashboard projects. That includes - charts, graphs, navbars, tabs, buttons, cards, tables, profile, tabs, forms, modals, app pages, calender, web apps example templates and more... for React and Styled using Tailwind CSS
+
+
+
+## Update Logs
+
+### Version 1.3.7 - [June 20, 2024]
+
+#### Enhancements
+
+- **Enhancement 01:** Remove Repetition of DefaultLayout in every Pages
+- **Enhancement 02:** Add ClickOutside Component for reduce repeated functionality in Header Message, Notification and User Dropdowns.
+
+### Version 1.3.6 - [Jan 31, 2024]
+
+#### Enhancements
+
+- **Enhancement 01:** Integrate flatpickr in [Date Picker/Form Elements]
+- **Enhancement 02:** Change color after select an option [Select Element/Form Elements].
+- **Enhancement 03:** Make it functional [Multiselect Dropdown/Form Elements].
+- **Enhancement 04:** Make best value editable [Pricing Table One/Pricing Table].
+- **Enhancement 05:** Rearrange Folder structure.
+
+### Version 1.2.0 - [Apr 28, 2023]
+
+- Add Typescript in TailAdmin React.
+
+### Version 1.0.0 - Initial Release - [Mar 13, 2023]
+
+- Initial release of TailAdmin React.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TailAdmin - Tailwind CSS Admin Dashboard Template</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "tailadmin-react-free",
+  "name": "ThriveX",
  "private": true,
  "version": "1.3.7",
  "type": "module",
@@ -9,9 +9,9 @@
    "preview": "vite preview"
  },
  "author": {
-    "name": "TailAdmin",
-    "email": "hello@tailadmin.com",
-    "url": "https://tailadmin.com"
+    "name": "YuYang",
+    "email": "liuyuyang1024@yeah.net",
+    "url": "https://blog.liuyuyang.net"
  },
  "dependencies": {
    "apexcharts": "^3.41.0",
@@ -41,4 +41,4 @@
    "vite": "^4.4.7",
    "webpack": "^5.88.2"
  }
-}
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,149 @@
+import { useEffect, useState } from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
+
+import Loader from './common/Loader';
+import PageTitle from './components/PageTitle';
+import SignIn from './pages/Authentication/SignIn';
+import SignUp from './pages/Authentication/SignUp';
+import Calendar from './pages/Calendar';
+import Chart from './pages/Chart';
+import ECommerce from './pages/Dashboard/ECommerce';
+import FormElements from './pages/Form/FormElements';
+import FormLayout from './pages/Form/FormLayout';
+import Profile from './pages/Profile';
+import Settings from './pages/Settings';
+import Tables from './pages/Tables';
+import Alerts from './pages/UiElements/Alerts';
+import Buttons from './pages/UiElements/Buttons';
+import DefaultLayout from './layout/DefaultLayout';
+
+function App() {
+  const [loading, setLoading] = useState<boolean>(true);
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  useEffect(() => {
+    setTimeout(() => setLoading(false), 1000);
+  }, []);
+
+  return loading ? (
+    <Loader />
+  ) : (
+    <DefaultLayout>
+      <Routes>
+        <Route
+          index
+          element={
+            <>
+              <PageTitle title="eCommerce Dashboard | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <ECommerce />
+            </>
+          }
+        />
+        <Route
+          path="/create"
+          element={
+            <>
+              <PageTitle title="Calendar | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+            </>
+          }
+        />
+        <Route
+          path="/profile"
+          element={
+            <>
+              <PageTitle title="Profile | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <Profile />
+            </>
+          }
+        />
+        <Route
+          path="/forms/form-elements"
+          element={
+            <>
+              <PageTitle title="Form Elements | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <FormElements />
+            </>
+          }
+        />
+        <Route
+          path="/forms/form-layout"
+          element={
+            <>
+              <PageTitle title="Form Layout | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <FormLayout />
+            </>
+          }
+        />
+        <Route
+          path="/tables"
+          element={
+            <>
+              <PageTitle title="Tables | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <Tables />
+            </>
+          }
+        />
+        <Route
+          path="/settings"
+          element={
+            <>
+              <PageTitle title="Settings | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <Settings />
+            </>
+          }
+        />
+        <Route
+          path="/chart"
+          element={
+            <>
+              <PageTitle title="Basic Chart | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <Chart />
+            </>
+          }
+        />
+        <Route
+          path="/ui/alerts"
+          element={
+            <>
+              <PageTitle title="Alerts | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <Alerts />
+            </>
+          }
+        />
+        <Route
+          path="/ui/buttons"
+          element={
+            <>
+              <PageTitle title="Buttons | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <Buttons />
+            </>
+          }
+        />
+        <Route
+          path="/auth/signin"
+          element={
+            <>
+              <PageTitle title="Signin | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <SignIn />
+            </>
+          }
+        />
+        <Route
+          path="/auth/signup"
+          element={
+            <>
+              <PageTitle title="Signup | TailAdmin - Tailwind CSS Admin Dashboard Template" />
+              <SignUp />
+            </>
+          }
+        />
+      </Routes>
+    </DefaultLayout>
+  );
+}
+
+export default App;
--- a/src/pages/Calendar.tsx
+++ b/src/pages/Calendar.tsx
@@ -0,0 +1,273 @@
+import Breadcrumb from '../components/Breadcrumbs/Breadcrumb';
+
+const Calendar = () => {
+  return (
+    <>
+      <Breadcrumb pageName="Calendar" />
+
+      {/* <!-- ====== Calendar Section Start ====== --> */}
+      <div className="w-full max-w-full rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
+        <table className="w-full">
+          <thead>
+            <tr className="grid grid-cols-7 rounded-t-sm bg-primary text-white">
+              <th className="flex h-15 items-center justify-center rounded-tl-sm p-1 text-xs font-semibold sm:text-base xl:p-5">
+                <span className="hidden lg:block"> Sunday </span>
+                <span className="block lg:hidden"> Sun </span>
+              </th>
+              <th className="flex h-15 items-center justify-center p-1 text-xs font-semibold sm:text-base xl:p-5">
+                <span className="hidden lg:block"> Monday </span>
+                <span className="block lg:hidden"> Mon </span>
+              </th>
+              <th className="flex h-15 items-center justify-center p-1 text-xs font-semibold sm:text-base xl:p-5">
+                <span className="hidden lg:block"> Tuesday </span>
+                <span className="block lg:hidden"> Tue </span>
+              </th>
+              <th className="flex h-15 items-center justify-center p-1 text-xs font-semibold sm:text-base xl:p-5">
+                <span className="hidden lg:block"> Wednesday </span>
+                <span className="block lg:hidden"> Wed </span>
+              </th>
+              <th className="flex h-15 items-center justify-center p-1 text-xs font-semibold sm:text-base xl:p-5">
+                <span className="hidden lg:block"> Thursday </span>
+                <span className="block lg:hidden"> Thur </span>
+              </th>
+              <th className="flex h-15 items-center justify-center p-1 text-xs font-semibold sm:text-base xl:p-5">
+                <span className="hidden lg:block"> Friday </span>
+                <span className="block lg:hidden"> Fri </span>
+              </th>
+              <th className="flex h-15 items-center justify-center rounded-tr-sm p-1 text-xs font-semibold sm:text-base xl:p-5">
+                <span className="hidden lg:block"> Saturday </span>
+                <span className="block lg:hidden"> Sat </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* <!-- Line 1 --> */}
+            <tr className="grid grid-cols-7">
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  1
+                </span>
+                <div className="group h-16 w-full flex-grow cursor-pointer py-1 md:h-30">
+                  <span className="group-hover:text-primary md:hidden">
+                    More
+                  </span>
+                  <div className="event invisible absolute left-2 z-99 mb-1 flex w-[200%] flex-col rounded-sm border-l-[3px] border-primary bg-gray px-3 py-1 text-left opacity-0 group-hover:visible group-hover:opacity-100 dark:bg-meta-4 md:visible md:w-[190%] md:opacity-100">
+                    <span className="event-name text-sm font-semibold text-black dark:text-white">
+                      Redesign Website
+                    </span>
+                    <span className="time text-sm font-medium text-black dark:text-white">
+                      1 Dec - 2 Dec
+                    </span>
+                  </div>
+                </div>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  2
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  3
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  4
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  5
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  6
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  7
+                </span>
+              </td>
+            </tr>
+            {/* <!-- Line 1 --> */}
+            {/* <!-- Line 2 --> */}
+            <tr className="grid grid-cols-7">
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  8
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  9
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  10
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  11
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  12
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  13
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  14
+                </span>
+              </td>
+            </tr>
+            {/* <!-- Line 2 --> */}
+            {/* <!-- Line 3 --> */}
+            <tr className="grid grid-cols-7">
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  15
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  16
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  17
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  18
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  19
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  20
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  21
+                </span>
+              </td>
+            </tr>
+            {/* <!-- Line 3 --> */}
+            {/* <!-- Line 4 --> */}
+            <tr className="grid grid-cols-7">
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  22
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  23
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  24
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  25
+                </span>
+                <div className="group h-16 w-full flex-grow cursor-pointer py-1 md:h-30">
+                  <span className="group-hover:text-primary md:hidden">
+                    More
+                  </span>
+                  <div className="event invisible absolute left-2 z-99 mb-1 flex w-[300%] flex-col rounded-sm border-l-[3px] border-primary bg-gray px-3 py-1 text-left opacity-0 group-hover:visible group-hover:opacity-100 dark:bg-meta-4 md:visible md:w-[290%] md:opacity-100">
+                    <span className="event-name text-sm font-semibold text-black dark:text-white">
+                      App Design
+                    </span>
+                    <span className="time text-sm font-medium text-black dark:text-white">
+                      25 Dec - 27 Dec
+                    </span>
+                  </div>
+                </div>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  26
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  27
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  28
+                </span>
+              </td>
+            </tr>
+            {/* <!-- Line 4 --> */}
+            {/* <!-- Line 5 --> */}
+            <tr className="grid grid-cols-7">
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  29
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  30
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  31
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  1
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  2
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  3
+                </span>
+              </td>
+              <td className="ease relative h-20 cursor-pointer border border-stroke p-2 transition duration-500 hover:bg-gray dark:border-strokedark dark:hover:bg-meta-4 md:h-25 md:p-6 xl:h-31">
+                <span className="font-medium text-black dark:text-white">
+                  4
+                </span>
+              </td>
+            </tr>
+            {/* <!-- Line 5 --> */}
+          </tbody>
+        </table>
+      </div>
+      {/* <!-- ====== Calendar Section End ====== --> */}
+    </>
+  );
+};
+
+export default Calendar;
--- a/src/pages/Create/index.tsx
+++ b/src/pages/Create/index.tsx
@@ -4,8 +4,6 @@ const Create = () => {
  return (
    <>
      <Breadcrumb pageName="Calendar" />
-
-      
    </>
  );
 };
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -0,0 +1,254 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    fontFamily: {
+      satoshi: ['Satoshi', 'sans-serif'],
+    },
+    screens: {
+      '2xsm': '375px',
+      xsm: '425px',
+      '3xl': '2000px',
+      ...defaultTheme.screens,
+    },
+    extend: {
+      colors: {
+        current: 'currentColor',
+        transparent: 'transparent',
+        white: '#FFFFFF',
+        black: '#1C2434',
+        'black-2': '#010101',
+        body: '#64748B',
+        bodydark: '#AEB7C0',
+        bodydark1: '#DEE4EE',
+        bodydark2: '#8A99AF',
+        primary: '#3C50E0',
+        secondary: '#80CAEE',
+        stroke: '#E2E8F0',
+        gray: '#EFF4FB',
+        graydark: '#333A48',
+        'gray-2': '#F7F9FC',
+        'gray-3': '#FAFAFA',
+        whiten: '#F1F5F9',
+        whiter: '#F5F7FD',
+        boxdark: '#24303F',
+        'boxdark-2': '#1A222C',
+        strokedark: '#2E3A47',
+        'form-strokedark': '#3d4d60',
+        'form-input': '#1d2a39',
+        'meta-1': '#DC3545',
+        'meta-2': '#EFF2F7',
+        'meta-3': '#10B981',
+        'meta-4': '#313D4A',
+        'meta-5': '#259AE6',
+        'meta-6': '#FFBA00',
+        'meta-7': '#FF6766',
+        'meta-8': '#F0950C',
+        'meta-9': '#E5E7EB',
+        success: '#219653',
+        danger: '#D34053',
+        warning: '#FFA70B',
+      },
+      fontSize: {
+        'title-xxl': ['44px', '55px'],
+        'title-xl': ['36px', '45px'],
+        'title-xl2': ['33px', '45px'],
+        'title-lg': ['28px', '35px'],
+        'title-md': ['24px', '30px'],
+        'title-md2': ['26px', '30px'],
+        'title-sm': ['20px', '26px'],
+        'title-xsm': ['18px', '24px'],
+      },
+      spacing: {
+        4.5: '1.125rem',
+        5.5: '1.375rem',
+        6.5: '1.625rem',
+        7.5: '1.875rem',
+        8.5: '2.125rem',
+        9.5: '2.375rem',
+        10.5: '2.625rem',
+        11: '2.75rem',
+        11.5: '2.875rem',
+        12.5: '3.125rem',
+        13: '3.25rem',
+        13.5: '3.375rem',
+        14: '3.5rem',
+        14.5: '3.625rem',
+        15: '3.75rem',
+        15.5: '3.875rem',
+        16: '4rem',
+        16.5: '4.125rem',
+        17: '4.25rem',
+        17.5: '4.375rem',
+        18: '4.5rem',
+        18.5: '4.625rem',
+        19: '4.75rem',
+        19.5: '4.875rem',
+        21: '5.25rem',
+        21.5: '5.375rem',
+        22: '5.5rem',
+        22.5: '5.625rem',
+        24.5: '6.125rem',
+        25: '6.25rem',
+        25.5: '6.375rem',
+        26: '6.5rem',
+        27: '6.75rem',
+        27.5: '6.875rem',
+        29: '7.25rem',
+        29.5: '7.375rem',
+        30: '7.5rem',
+        31: '7.75rem',
+        32.5: '8.125rem',
+        34: '8.5rem',
+        34.5: '8.625rem',
+        35: '8.75rem',
+        36.5: '9.125rem',
+        37.5: '9.375rem',
+        39: '9.75rem',
+        39.5: '9.875rem',
+        40: '10rem',
+        42.5: '10.625rem',
+        44: '11rem',
+        45: '11.25rem',
+        46: '11.5rem',
+        47.5: '11.875rem',
+        49: '12.25rem',
+        50: '12.5rem',
+        52: '13rem',
+        52.5: '13.125rem',
+        54: '13.5rem',
+        54.5: '13.625rem',
+        55: '13.75rem',
+        55.5: '13.875rem',
+        59: '14.75rem',
+        60: '15rem',
+        62.5: '15.625rem',
+        65: '16.25rem',
+        67: '16.75rem',
+        67.5: '16.875rem',
+        70: '17.5rem',
+        72.5: '18.125rem',
+        73: '18.25rem',
+        75: '18.75rem',
+        90: '22.5rem',
+        94: '23.5rem',
+        95: '23.75rem',
+        100: '25rem',
+        115: '28.75rem',
+        125: '31.25rem',
+        132.5: '33.125rem',
+        150: '37.5rem',
+        171.5: '42.875rem',
+        180: '45rem',
+        187.5: '46.875rem',
+        203: '50.75rem',
+        230: '57.5rem',
+        242.5: '60.625rem',
+      },
+      maxWidth: {
+        2.5: '0.625rem',
+        3: '0.75rem',
+        4: '1rem',
+        11: '2.75rem',
+        13: '3.25rem',
+        14: '3.5rem',
+        15: '3.75rem',
+        22.5: '5.625rem',
+        25: '6.25rem',
+        30: '7.5rem',
+        34: '8.5rem',
+        35: '8.75rem',
+        40: '10rem',
+        42.5: '10.625rem',
+        44: '11rem',
+        45: '11.25rem',
+        70: '17.5rem',
+        90: '22.5rem',
+        94: '23.5rem',
+        125: '31.25rem',
+        132.5: '33.125rem',
+        142.5: '35.625rem',
+        150: '37.5rem',
+        180: '45rem',
+        203: '50.75rem',
+        230: '57.5rem',
+        242.5: '60.625rem',
+        270: '67.5rem',
+        280: '70rem',
+        292.5: '73.125rem',
+      },
+      maxHeight: {
+        35: '8.75rem',
+        70: '17.5rem',
+        90: '22.5rem',
+        550: '34.375rem',
+        300: '18.75rem',
+      },
+      minWidth: {
+        22.5: '5.625rem',
+        42.5: '10.625rem',
+        47.5: '11.875rem',
+        75: '18.75rem',
+      },
+      zIndex: {
+        999999: '999999',
+        99999: '99999',
+        9999: '9999',
+        999: '999',
+        99: '99',
+        9: '9',
+        1: '1',
+      },
+      opacity: {
+        65: '.65',
+      },
+      backgroundImage: {
+        video: "url('../images/video/video.png')",
+      },
+      content: {
+        'icon-copy': 'url("../images/icon/icon-copy-alt.svg")',
+      },
+      transitionProperty: { width: 'width', stroke: 'stroke' },
+      borderWidth: {
+        6: '6px',
+      },
+      boxShadow: {
+        default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)',
+        card: '0px 1px 3px rgba(0, 0, 0, 0.12)',
+        'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)',
+        switcher:
+          '0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)',
+        'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)',
+        1: '0px 1px 3px rgba(0, 0, 0, 0.08)',
+        2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
+        3: '0px 1px 5px rgba(0, 0, 0, 0.14)',
+        4: '0px 4px 10px rgba(0, 0, 0, 0.12)',
+        5: '0px 1px 1px rgba(0, 0, 0, 0.15)',
+        6: '0px 3px 15px rgba(0, 0, 0, 0.1)',
+        7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A',
+        8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)',
+      },
+      dropShadow: {
+        1: '0px 1px 0px #E2E8F0',
+        2: '0px 1px 4px rgba(0, 0, 0, 0.12)',
+      },
+      keyframes: {
+        rotating: {
+          '0%, 100%': { transform: 'rotate(360deg)' },
+          '50%': { transform: 'rotate(0deg)' },
+        },
+      },
+      animation: {
+        'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)',
+        rotating: 'rotating 30s linear infinite',
+        'spin-1.5': 'spin 1.5s linear infinite',
+        'spin-2': 'spin 2s linear infinite',
+        'spin-3': 'spin 3s linear infinite',
+      },
+    },
+  },
+  plugins: [],
+}