diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 00000000..f4208954 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,12 @@ +name: Autocloser +on: [issues] +jobs: + autoclose: + runs-on: ubuntu-latest + steps: + - name: Issue auto-closer + uses: roots/issue-closer-action@v1.1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/tailwind-webapp-nextjs?ref=twnjs-new-issue\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\nπŸ‘‰  https://www.creative-tim.com/bundles\nπŸ‘‰  https://www.creative-tim.com\n\n\n
\n\n" + issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) diff --git a/.gitignore b/.gitignore index 4d29575d..e5be06e5 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.next/ +out/ diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..c05642fe --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,6 @@ +# Change Log + +## [1.0.0] 2020-09-29 +### Original Release +- Started project from [Tailwind Starter Kit by Creative Tim](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=twnjs-changelog) +- Added design from Tailwind Starter Kit by Creative Tim diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..dc0687cb --- /dev/null +++ b/ISSUE_TEMPLATE.md @@ -0,0 +1,13 @@ + + + diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 00000000..482d52e4 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,9 @@ +MIT License + +Copyright (c) 2020 Creative Tim (https://www.creative-tim.com?ref=twnjs-license) + +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. diff --git a/README.md b/README.md index 323cc7d4..b8f97a8d 100644 --- a/README.md +++ b/README.md @@ -1,115 +1,187 @@ -# ![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter) +# Tailwind WebApp NextJS ![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter) +![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/tailwind-webapp-nextjs.svg) ![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/tailwind-webapp-nextjs.svg) ![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg) ![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg) -![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/tailwind-starter-kit.svg?maxAge=2592000) ![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/tailwind-starter-kit.svg?maxAge=2592000) ![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg) ![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg) +![Tailwind WebApp NextJS](https://github.com/creativetimofficial/public-assets/blob/master/tailwind-webapp-nextjs/tailwind-webapp-nextjs.jpg?raw=true) +### A beautiful UI Kit and Admin for Tailwind CSS and NextJS. -![Product Presentation Image](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/dashboard.jpg) +Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Let Tailwind Webapp NextJS amaze you with its cool features and build tools and get your project to a whole new level. -## Table of Contents - -* [Description](#description) -* [Documentation](#documentation) -* [Quick Start](#quick-start) -* [Browser Support](#browser-support) -* [Reporting Issues](#reporting-issues) -* [Licensing](#licensing) -* [Useful Links](#useful-links) -* [Resources](#resources) -* [Versions](#versions) -* [File Structure](#file-structure) - - -## Description - -### React Dashboard Page - -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - -### Available Scripts - -In the project directory, you can run: - -#### `npm start` - -Runs the app in the development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. +Tailwind WebApp NextJS is Free and Open Source. It features multiple HTML and NextJS elements and it comes with dynamic components for NextJS. -The page will reload if you make edits.
-You will also see any lint errors in the console. +It is based on [Tailwind Starter Kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=twnjs-github-readme) by Creative Tim, and it is build with both presentation pages, and pages for an admin dashboard. -#### `npm test` +Speed up your web development with a beautiful product made by Creative Tim . +If you like bright and fresh colors, you will love this Free Tailwind CSS Template! It features a huge number of components that can help you create amazing websites. -Launches the test runner in the interactive watch mode.
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. +### Get Started -#### `npm run build` +- Install NodeJS **LTS** version from NodeJs Official Page +- Download the product on this page +- Unzip the downloaded file to a folder in your computer +- Open Terminal +- Go to your file project (where you’ve unzipped the product) +- (If you are on a linux based terminal) Simply run `npm run install:clean` +- (If not) Run in terminal `npm install` +- (If not) Run in terminal `npm run build:tailwind` (each time you add a new class, a class that does not exist in `src/assets/styles/tailwind.css`, you will need to run this command) +- (If not) Run in terminal `npm run dev` +- Navigate to https://localhost:3000 +- Check more about [Tailwind CSS](https://tailwindcss.com/?ref=creativetim) -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. +### Pages -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! +If you want to get inspiration or just show something directly to your clients, +you can jump start your development with our pre-built example pages. You will be able +to quickly set up the basic structure for your web project. -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. +Here are all the page from the project: +- [Presentation](https://demos.creative-tim.com/tailwind-webapp-nextjs/?ref=twnjs-github-readme) +- Admin Samples + - [Dashboard](https://demos.creative-tim.com/tailwind-webapp-nextjs/admin/dashboard?ref=twnjs-github-readme) + - [Settings](https://demos.creative-tim.com/tailwind-webapp-nextjs/admin/settings?ref=twnjs-github-readme) + - [Tables](https://demos.creative-tim.com/tailwind-webapp-nextjs/admin/tables?ref=twnjs-github-readme) + - [Maps](https://demos.creative-tim.com/tailwind-webapp-nextjs/admin/maps?ref=twnjs-github-readme) +- Authentication Samples + - [Login](https://demos.creative-tim.com/tailwind-webapp-nextjs/auth/login?ref=twnjs-github-readme) + - [Register](https://demos.creative-tim.com/tailwind-webapp-nextjs/auth/register?ref=twnjs-github-readme) +- Presentation Samples + - [Landing](https://demos.creative-tim.com/tailwind-webapp-nextjs/landing?ref=twnjs-github-readme) + - [Profile](https://demos.creative-tim.com/tailwind-webapp-nextjs/profile?ref=twnjs-github-readme) -#### `npm run eject` -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** +### Fully Coded Components -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. +Tailwind WebApp NextJS is built with over frontend 120 components, giving you the freedom of choosing and combining. All components can take variations in colors, that you can easily modify using Tailwind CSS classes (NOTE: each time you add a new class, a class that does not exist in `src/assets/styles/tailwind.css`, you will need to compile again tailwind). -Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. +You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. +This Free Tailwind CSS Template is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done. -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. +Every element has multiple states for colors, styles, hover, focus, that you can easily access and use. -### Learn More -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). +### CSS Components -To learn React, check out the [React documentation](https://reactjs.org/). +Tailwind WebApp NextJS comes with 120 Fully Coded CSS elements, such as [Alerts](https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/webapp?ref=twnjs-github-readme), [Buttons](https://www.creative-tim.com/learning-lab/tailwind/nextjs/buttons/webapp?ref=twnjs-github-readme), [Inputs](https://www.creative-tim.com/learning-lab/tailwind/nextjs/inputs/webapp?ref=twnjs-github-readme) and many more. -#### Code Splitting +Please [check all of them here](https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/webapp?ref=twnjs-github-readme). -This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting +### NextJS Components -#### Analyzing the Bundle Size +We also feature the following 18 dynamic components: +- [Alerts](https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/webapp?ref=twnjs-github-readme) +- [Popper for Menus](https://www.creative-tim.com/learning-lab/tailwind/nextjs/dropdowns/webapp?ref=twnjs-github-readme) +- [Menus](https://www.creative-tim.com/learning-lab/tailwind/nextjs/menus/webapp?ref=twnjs-github-readme) +- [Modals](https://www.creative-tim.com/learning-lab/tailwind/nextjs/modals/webapp?ref=twnjs-github-readme) +- [Navbars](https://www.creative-tim.com/learning-lab/tailwind/nextjs/navbar/webapp?ref=twnjs-github-readme) +- [Popper for popover content](https://www.creative-tim.com/learning-lab/tailwind/nextjs/popovers/webapp?ref=twnjs-github-readme) +- [Tabs](https://www.creative-tim.com/learning-lab/tailwind/nextjs/tabs/webapp?ref=twnjs-github-readme) +- [Popper for tooltips content](https://www.creative-tim.com/learning-lab/tailwind/nextjs/tooltips/webapp?ref=twnjs-github-readme) -This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size -#### Making a Progressive Web App - -This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app - -#### Advanced Configuration - -This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration - -#### Deployment - -This section has moved here: https://facebook.github.io/create-react-app/docs/deployment +## Table of Contents -#### `npm run build` fails to minify +* [Versions](#versions) +* [Documentation](#documentation) +* [Quick Start](#quick-start) +* [Files and folders](#files-and-folders) +* [Browser Support](#browser-support) +* [Reporting Issues](#reporting-issues) +* [Licensing](#licensing) +* [Useful Links](#useful-links) +* [Resources](#resources) -This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify +## Versions +[](https://www.creative-tim.com/product/tailwind-webapp-angular?ref=twnjs-github-readme)[](https://www.creative-tim.com/product/tailwind-webapp-js?ref=twnjs-github-readme)[](https://www.creative-tim.com/product/tailwind-webapp-nextjs?ref=twnjs-github-readme)[](https://www.creative-tim.com/product/tailwind-webapp-react?ref=twnjs-github-readme)[](https://www.creative-tim.com/product/tailwind-webapp-svelte?ref=twnjs-github-readme)[](https://www.creative-tim.com/product/vue-tailwind-webapp?ref=twnjs-github-readme) +| Angular | JavaScript / HTML | NextJS | React | Svelte | VueJS | +| :---: | :---: | :---: | :---: | :---: | :---: | +| [![Tailwind WebApp Angular](https://github.com/creativetimofficial/public-assets/blob/master/tailwind-webapp-angular/tailwind-webapp-angular.jpg?raw=true)](https://www.creative-tim.com/product/tailwind-webapp-angular?ref=twnjs-github-readme) | [![Tailwind WebApp](https://github.com/creativetimofficial/public-assets/blob/master/tailwind-webapp-js/tailwind-webapp-js.jpg?raw=true)](https://www.creative-tim.com/product/tailwind-webapp-js?ref=twnjs-github-readme) | [![Tailwind WebApp NextJS](https://github.com/creativetimofficial/public-assets/blob/master/tailwind-webapp-nextjs/tailwind-webapp-nextjs.jpg?raw=true)](https://www.creative-tim.com/product/tailwind-webapp-nextjs?ref=twnjs-github-readme) | [![Tailwind WebApp React](https://github.com/creativetimofficial/public-assets/blob/master/tailwind-webapp-react/tailwind-webapp-react.jpg?raw=true)](https://www.creative-tim.com/product/tailwind-webapp-react?ref=twnjs-github-readme) | [![Tailwind WebApp Svelte](https://github.com/creativetimofficial/public-assets/blob/master/tailwind-webapp-svelte/tailwind-webapp-svelte.jpg?raw=true)](https://www.creative-tim.com/product/tailwind-webapp-svelte?ref=twnjs-github-readme) | [![Vue Tailwind WebApp](https://github.com/creativetimofficial/public-assets/blob/master/vue-tailwind-webapp/vue-tailwind-webapp.jpg?raw=true)](https://www.creative-tim.com/product/vue-tailwind-webapp?ref=twnjs-github-readme) ## Documentation -The documentation for the React Dashboard Page is hosted at our website. - - - -View More - +The documentation for the Tailwind WebApp NextJS is hosted at our website. ## Quick start +- Download from Creative Tim. +- Check it on Github. +## Files and Folder -- Download from Github. -- Check it on Github. +This is the project structure that you will get upon the download: +``` +tailwind-webapp-nextjs +. +β”œβ”€β”€ CHANGELOG.md +β”œβ”€β”€ ISSUE_TEMPLATE.md +β”œβ”€β”€ LICENSE.md +β”œβ”€β”€ README.md +β”œβ”€β”€ assets +β”‚Β Β  β”œβ”€β”€ img +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ brand +β”‚Β Β  β”‚Β Β  β”‚Β Β  └── favicon.ico +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ github.svg +β”‚Β Β  β”‚Β Β  └── google.svg +β”‚Β Β  └── styles +β”‚Β Β  β”œβ”€β”€ index.css +β”‚Β Β  └── tailwind.css +β”œβ”€β”€ components +β”‚Β Β  β”œβ”€β”€ Cards +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ CardBarChart.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ CardLineChart.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ CardPageVisits.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ CardProfile.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ CardSettings.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ CardSocialTraffic.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ CardStats.js +β”‚Β Β  β”‚Β Β  └── CardTable.js +β”‚Β Β  β”œβ”€β”€ Dropdowns +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ IndexDropdown.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ NotificationDropdown.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ PagesDropdown.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ TableDropdown.js +β”‚Β Β  β”‚Β Β  └── UserDropdown.js +β”‚Β Β  β”œβ”€β”€ Footers +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Footer.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ FooterAdmin.js +β”‚Β Β  β”‚Β Β  └── FooterSmall.js +β”‚Β Β  β”œβ”€β”€ Headers +β”‚Β Β  β”‚Β Β  └── HeaderStats.js +β”‚Β Β  β”œβ”€β”€ Maps +β”‚Β Β  β”‚Β Β  └── MapExample.js +β”‚Β Β  β”œβ”€β”€ Navbars +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ AdminNavbar.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ AuthNavbar.js +β”‚Β Β  β”‚Β Β  └── IndexNavbar.js +β”‚Β Β  β”œβ”€β”€ PageChange +β”‚Β Β  β”‚Β Β  └── PageChange.js +β”‚Β Β  └── Sidebar +β”‚Β Β  └── Sidebar.js +β”œβ”€β”€ layouts +β”‚Β Β  β”œβ”€β”€ Admin.js +β”‚Β Β  └── Auth.js +β”œβ”€β”€ next.config.js +β”œβ”€β”€ package.json +β”œβ”€β”€ pages +β”‚Β Β  β”œβ”€β”€ 404.js +β”‚Β Β  β”œβ”€β”€ _app.js +β”‚Β Β  β”œβ”€β”€ _document.js +β”‚Β Β  β”œβ”€β”€ _error.js +β”‚Β Β  β”œβ”€β”€ admin +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ dashboard.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ maps.js +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ settings.js +β”‚Β Β  β”‚Β Β  └── tables.js +β”‚Β Β  β”œβ”€β”€ auth +β”‚Β Β  β”‚Β Β  β”œβ”€β”€ login.js +β”‚Β Β  β”‚Β Β  └── register.js +β”‚Β Β  β”œβ”€β”€ index.js +β”‚Β Β  β”œβ”€β”€ landing.js +β”‚Β Β  └── profile.js +└── tailwind.config.js +``` ## Browser Support @@ -121,32 +193,32 @@ At present, we officially aim to support the last two versions of the following ## Reporting Issues -We use GitHub Issues as the official bug tracker for the React Dashboard Page. Here are some advices for our users that want to report an issue: +We use GitHub Issues as the official bug tracker for the Tailwind WebApp NextJS. Here are some advices for our users that want to report an issue: -1. Make sure that you are using the latest version of the React Dashboard Page. Check the CHANGELOG from your dashboard on our website. +1. Make sure that you are using the latest version of the Tailwind WebApp NextJS. Check the CHANGELOG from your dashboard on our website. 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. ## Licensing -- Copyright 2019 Creative Tim - +- Copyright 2020 Creative Tim - -- Licensed under MIT +- Licensed under MIT ## Useful Links - Tutorials -- Affiliate Program (earn money) -- Blog Creative Tim -- Free Products from Creative Tim -- Premium Products from Creative Tim -- React Products from Creative Tim -- Angular Products from Creative Tim -- VueJS Products from Creative Tim -- More products from Creative Tim -- Check our Bundles here +- Affiliate Program (earn money) +- Blog Creative Tim +- Free Products from Creative Tim +- Premium Products from Creative Tim +- React Products from Creative Tim +- Angular Products from Creative Tim +- VueJS Products from Creative Tim +- More products from Creative Tim +- Check our Bundles here +- Check our awesome builder here +- Check Tailwind Starter Kit, the project behind this product here ### Social Media @@ -160,80 +232,9 @@ Instagram: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/#/dashboard?ref=rdp-tsk-readme -- Download Page: https://github.com/creativetimofficial/tailwind-starter-kit/tree/master/Dashboard%20Page/react-dashboard-page?ref=rdp-tsk-readme -- Documentation: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/#/documentation/dashboard?ref=rdp-tsk-readme -- License Agreement: https://www.creative-tim.com/license?ref=rdp-tsk-readme -- Support: https://www.creative-tim.com/contact-us?ref=rdp-tsk-readme -- Issues: Github Issues Page - - -## Versions - - - -### FREE Dashboards - -|Angular Dashboard Page|HTML Dashboard Page|React Dashboard Page|VueJS Dashboard Page| -| --- | --- | --- | --- | -| ![Angular Dashboard Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/dashboard.jpg) | ![HTML Dashboard Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/dashboard.jpg) | ![React Dashboard Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/dashboard.jpg) | ![VueJS Dashboard Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/dashboard.jpg) | - - - - -### FREE Design Systems (Kits) - - -|Angular Landing Page|HTML Landing Page|React Landing Page|VueJS Landing Page| -| --- | --- | --- | --- | -| ![Angular Landing Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/landing.jpg) | ![HTML Landing Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/landing.jpg) | ![React Landing Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/landing.jpg) | ![VueJS Landing Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/landing.jpg) | - - -|Angular Login Page|HTML Login Page|React Login Page|VueJS Login Page| -| --- | --- | --- | --- | -| ![Angular Login Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/login.jpg) | ![HTML Login Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/login.jpg) | ![React Login Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/login.jpg) | ![VueJS Login Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/login.jpg) | - - - -|Angular Profile Page|HTML Profile Page|React Profile Page|VueJS Profile Page| -| --- | --- | --- | --- | -| ![Angular Profile Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/profile.jpg) | ![HTML Profile Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/profile.jpg) | ![React Profile Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/profile.jpg) | ![VueJS Profile Page](https://raw.githubusercontent.com/creativetimofficial/tailwind-starter-kit/master/images/profile.jpg) | - - - - - - - - -## File Structure -Within the download you'll find the following directories and files: - -``` -. -|-- README.md -|-- gulpfile.js -|-- jsconfig.json -|-- package.json -|-- public -| |-- apple-icon.png -| |-- favicon.ico -| |-- index.html -| |-- manifest.json -| `-- robots.txt -`-- src - |-- assets - | `-- img - | |-- blue.png - | `-- team-1-800x800.jpg - |-- components - | |-- BarChart.js - | |-- LineChart.js - | |-- Navbar.js - | |-- NotificationDropdown.js - | |-- Sidebar.js - | `-- UserDropdown.js - |-- index.js - `-- views - `-- Dashboard.js -``` +- Demo: https://demos.creative-tim.com/tailwind-webapp-nextjs/?ref=twnjs-readme +- Download Page: https://www.creative-tim.com/product/tailwind-webapp-nextjs +- Documentation: https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/webapp?ref=twnjs-readme +- License Agreement: https://www.creative-tim.com/license?ref=twnjs-readme +- Support: https://www.creative-tim.com/contact-us?ref=twnjs-readme +- Issues: Github Issues Page diff --git a/assets/img/component-btn-pink.png b/assets/img/component-btn-pink.png new file mode 100644 index 00000000..6c30d017 Binary files /dev/null and b/assets/img/component-btn-pink.png differ diff --git a/assets/img/component-btn.png b/assets/img/component-btn.png new file mode 100644 index 00000000..c0995cfa Binary files /dev/null and b/assets/img/component-btn.png differ diff --git a/assets/img/component-info-2.png b/assets/img/component-info-2.png new file mode 100644 index 00000000..72f23016 Binary files /dev/null and b/assets/img/component-info-2.png differ diff --git a/assets/img/component-info-card.png b/assets/img/component-info-card.png new file mode 100644 index 00000000..eec92fca Binary files /dev/null and b/assets/img/component-info-card.png differ diff --git a/assets/img/component-menu.png b/assets/img/component-menu.png new file mode 100644 index 00000000..708b62ca Binary files /dev/null and b/assets/img/component-menu.png differ diff --git a/assets/img/component-profile-card.png b/assets/img/component-profile-card.png new file mode 100644 index 00000000..a6515637 Binary files /dev/null and b/assets/img/component-profile-card.png differ diff --git a/assets/img/documentation.png b/assets/img/documentation.png new file mode 100644 index 00000000..13829f29 Binary files /dev/null and b/assets/img/documentation.png differ diff --git a/assets/img/img-1-1000x600.jpg b/assets/img/img-1-1000x600.jpg new file mode 100644 index 00000000..bd2dda1e Binary files /dev/null and b/assets/img/img-1-1000x600.jpg differ diff --git a/assets/img/landing.jpg b/assets/img/landing.jpg new file mode 100644 index 00000000..6fd00e38 Binary files /dev/null and b/assets/img/landing.jpg differ diff --git a/assets/img/login.jpg b/assets/img/login.jpg new file mode 100644 index 00000000..acd2b5e9 Binary files /dev/null and b/assets/img/login.jpg differ diff --git a/assets/img/pattern_nextjs.png b/assets/img/pattern_nextjs.png new file mode 100644 index 00000000..a8b47d05 Binary files /dev/null and b/assets/img/pattern_nextjs.png differ diff --git a/assets/img/profile.jpg b/assets/img/profile.jpg new file mode 100644 index 00000000..688e7136 Binary files /dev/null and b/assets/img/profile.jpg differ diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css index 9a939ac3..32ccf88d 100644 --- a/assets/styles/tailwind.css +++ b/assets/styles/tailwind.css @@ -306,11 +306,6 @@ textarea { * 2. Change font properties to `inherit` in Safari. */ -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - /* Interactive ========================================================================== */ @@ -618,10 +613,6 @@ video { } } -.group:hover .group-hover\:container { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -646,10 +637,6 @@ video { } } -.focus-within\:container:focus-within { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -674,10 +661,6 @@ video { } } -.first\:container:first-child { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -702,10 +685,6 @@ video { } } -.last\:container:last-child { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -730,10 +709,6 @@ video { } } -.odd\:container:nth-child(odd) { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -758,10 +733,6 @@ video { } } -.even\:container:nth-child(even) { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -786,10 +757,6 @@ video { } } -.hover\:container:hover { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -814,10 +781,6 @@ video { } } -.focus\:container:focus { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -842,10 +805,6 @@ video { } } -.active\:container:active { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -870,10 +829,6 @@ video { } } -.visited\:container:visited { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -898,10 +853,6 @@ video { } } -.disabled\:container:disabled { - width: 100%; -} - @media (min-width: 640px) { .container { max-width: 640px; @@ -926,157 +877,6 @@ video { } } -.form-input { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border-color: #e2e8f0; - border-width: 1px; - border-radius: 0.25rem; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5; -} - -.form-input::-webkit-input-placeholder { - color: #a0aec0; - opacity: 1; -} - -.form-input:-ms-input-placeholder { - color: #a0aec0; - opacity: 1; -} - -.form-input::-ms-input-placeholder { - color: #a0aec0; - opacity: 1; -} - -.form-input::placeholder { - color: #a0aec0; - opacity: 1; -} - -.form-input:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); - border-color: #63b3ed; -} - -.form-textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border-color: #e2e8f0; - border-width: 1px; - border-radius: 0.25rem; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5; -} - -.form-textarea::-webkit-input-placeholder { - color: #a0aec0; - opacity: 1; -} - -.form-textarea:-ms-input-placeholder { - color: #a0aec0; - opacity: 1; -} - -.form-textarea::-ms-input-placeholder { - color: #a0aec0; - opacity: 1; -} - -.form-textarea::placeholder { - color: #a0aec0; - opacity: 1; -} - -.form-textarea:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); - border-color: #63b3ed; -} - -.form-multiselect { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: #fff; - border-color: #e2e8f0; - border-width: 1px; - border-radius: 0.25rem; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5; -} - -.form-multiselect:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); - border-color: #63b3ed; -} - -.form-select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a0aec0'%3e%3cpath d='M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z'/%3e%3c/svg%3e"); - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - -webkit-print-color-adjust: exact; - color-adjust: exact; - background-repeat: no-repeat; - background-color: #fff; - border-color: #e2e8f0; - border-width: 1px; - border-radius: 0.25rem; - padding-top: 0.5rem; - padding-right: 2.5rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; - font-size: 1rem; - line-height: 1.5; - background-position: right 0.5rem center; - background-size: 1.5em 1.5em; -} - -.form-select::-ms-expand { - color: #a0aec0; - border: none; -} - -@media not print { - .form-select::-ms-expand { - display: none; - } -} - -@media print and (-ms-high-contrast: active), print and (-ms-high-contrast: none) { - .form-select { - padding-right: 0.75rem; - } -} - -.form-select:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); - border-color: #63b3ed; -} - .form-checkbox:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e"); border-color: transparent; @@ -1124,51 +924,98 @@ video { border-color: #63b3ed; } -.form-radio:checked { - background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); - border-color: transparent; - background-color: currentColor; - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; +.space-y-reverse > :not(template) ~ :not(template) { + --space-y-reverse: 1; } -@media not print { - .form-radio::-ms-check { - border-width: 1px; - color: transparent; - background: inherit; - border-color: inherit; - border-radius: inherit; - } +.space-x-reverse > :not(template) ~ :not(template) { + --space-x-reverse: 1; +} + +.divide-y-reverse > :not(template) ~ :not(template) { + --divide-y-reverse: 1; +} + +.divide-x-reverse > :not(template) ~ :not(template) { + --divide-x-reverse: 1; +} + +.divide-solid > :not(template) ~ :not(template) { + border-style: solid; +} + +.divide-dashed > :not(template) ~ :not(template) { + border-style: dashed; +} + +.divide-dotted > :not(template) ~ :not(template) { + border-style: dotted; +} + +.divide-double > :not(template) ~ :not(template) { + border-style: double; +} + +.divide-none > :not(template) ~ :not(template) { + border-style: none; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.not-sr-only { + position: static; + width: auto; + height: auto; + padding: 0; + margin: 0; + overflow: visible; + clip: auto; + white-space: normal; } -.form-radio { +.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; - -webkit-print-color-adjust: exact; - color-adjust: exact; - display: inline-block; - vertical-align: middle; - background-origin: border-box; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - flex-shrink: 0; - border-radius: 100%; - height: 1em; - width: 1em; - color: #4299e1; - background-color: #fff; - border-color: #e2e8f0; - border-width: 1px; } -.form-radio:focus { - outline: none; - box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); - border-color: #63b3ed; +.bg-fixed { + background-attachment: fixed; +} + +.bg-local { + background-attachment: local; +} + +.bg-scroll { + background-attachment: scroll; +} + +.bg-clip-border { + background-clip: border-box; +} + +.bg-clip-padding { + background-clip: padding-box; +} + +.bg-clip-content { + background-clip: content-box; +} + +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; } .bg-transparent { @@ -1205,6 +1052,18 @@ video { background-color: rgba(226, 232, 240, var(--bg-opacity)); } +.bg-gray-600 { + --bg-opacity: 1; + background-color: #718096; + background-color: rgba(113, 128, 150, var(--bg-opacity)); +} + +.bg-gray-700 { + --bg-opacity: 1; + background-color: #4a5568; + background-color: rgba(74, 85, 104, var(--bg-opacity)); +} + .bg-gray-800 { --bg-opacity: 1; background-color: #2d3748; @@ -1241,6 +1100,12 @@ video { background-color: rgba(229, 62, 62, var(--bg-opacity)); } +.bg-red-700 { + --bg-opacity: 1; + background-color: #c53030; + background-color: rgba(197, 48, 48, var(--bg-opacity)); +} + .bg-orange-200 { --bg-opacity: 1; background-color: #feebc8; @@ -1253,6 +1118,12 @@ video { background-color: rgba(237, 137, 54, var(--bg-opacity)); } +.bg-yellow-500 { + --bg-opacity: 1; + background-color: #ecc94b; + background-color: rgba(236, 201, 75, var(--bg-opacity)); +} + .bg-green-200 { --bg-opacity: 1; background-color: #c6f6d5; @@ -1289,12 +1160,6 @@ video { background-color: rgba(190, 227, 248, var(--bg-opacity)); } -.bg-blue-300 { - --bg-opacity: 1; - background-color: #90cdf4; - background-color: rgba(144, 205, 244, var(--bg-opacity)); -} - .bg-blue-400 { --bg-opacity: 1; background-color: #63b3ed; @@ -1313,18 +1178,6 @@ video { background-color: rgba(49, 130, 206, var(--bg-opacity)); } -.bg-blue-800 { - --bg-opacity: 1; - background-color: #2c5282; - background-color: rgba(44, 82, 130, var(--bg-opacity)); -} - -.bg-blue-900 { - --bg-opacity: 1; - background-color: #2a4365; - background-color: rgba(42, 67, 101, var(--bg-opacity)); -} - .bg-indigo-500 { --bg-opacity: 1; background-color: #667eea; @@ -1361,30 +1214,64 @@ video { background-color: rgba(74, 85, 104, var(--bg-opacity)); } -.active\:bg-blue-600:active { - --bg-opacity: 1; - background-color: #3182ce; - background-color: rgba(49, 130, 206, var(--bg-opacity)); -} - .active\:bg-indigo-600:active { --bg-opacity: 1; background-color: #5a67d8; background-color: rgba(90, 103, 216, var(--bg-opacity)); } -.bg-center { - background-position: center; +.bg-none { + background-image: none; } -.bg-cover { +.bg-opacity-50 { + --bg-opacity: 0.5; +} + +.bg-center { + background-position: center; +} + +.bg-repeat { + background-repeat: repeat; +} + +.bg-no-repeat { + background-repeat: no-repeat; +} + +.bg-repeat-x { + background-repeat: repeat-x; +} + +.bg-repeat-y { + background-repeat: repeat-y; +} + +.bg-repeat-round { + background-repeat: round; +} + +.bg-repeat-space { + background-repeat: space; +} + +.bg-cover { background-size: cover; } +.bg-full { + background-size: 100$; +} + .border-collapse { border-collapse: collapse; } +.border-separate { + border-collapse: separate; +} + .border-transparent { border-color: transparent; } @@ -1425,12 +1312,6 @@ video { border-color: rgba(74, 85, 104, var(--border-opacity)); } -.border-blue-700 { - --border-opacity: 1; - border-color: #2b6cb0; - border-color: rgba(43, 108, 176, var(--border-opacity)); -} - .rounded { border-radius: 0.25rem; } @@ -1457,6 +1338,18 @@ video { border-style: solid; } +.border-dashed { + border-style: dashed; +} + +.border-dotted { + border-style: dotted; +} + +.border-double { + border-style: double; +} + .border-none { border-style: none; } @@ -1493,6 +1386,14 @@ video { border-bottom-width: 1px; } +.box-border { + box-sizing: border-box; +} + +.box-content { + box-sizing: content-box; +} + .cursor-pointer { cursor: pointer; } @@ -1505,6 +1406,10 @@ video { display: inline-block; } +.inline { + display: inline; +} + .flex { display: flex; } @@ -1517,6 +1422,54 @@ video { display: table; } +.table-caption { + display: table-caption; +} + +.table-cell { + display: table-cell; +} + +.table-column { + display: table-column; +} + +.table-column-group { + display: table-column-group; +} + +.table-footer-group { + display: table-footer-group; +} + +.table-header-group { + display: table-header-group; +} + +.table-row-group { + display: table-row-group; +} + +.table-row { + display: table-row; +} + +.flow-root { + display: flow-root; +} + +.grid { + display: grid; +} + +.inline-grid { + display: inline-grid; +} + +.contents { + display: contents; +} + .hidden { display: none; } @@ -1525,22 +1478,186 @@ video { flex-direction: row; } +.flex-row-reverse { + flex-direction: row-reverse; +} + .flex-col { flex-direction: column; } +.flex-col-reverse { + flex-direction: column-reverse; +} + .flex-wrap { flex-wrap: wrap; } +.flex-wrap-reverse { + flex-wrap: wrap-reverse; +} + +.flex-no-wrap { + flex-wrap: nowrap; +} + +.place-items-auto { + place-items: auto; +} + +.place-items-start { + place-items: start; +} + +.place-items-end { + place-items: end; +} + +.place-items-center { + place-items: center; +} + +.place-items-stretch { + place-items: stretch; +} + +.place-content-center { + place-content: center; +} + +.place-content-start { + place-content: start; +} + +.place-content-end { + place-content: end; +} + +.place-content-between { + place-content: space-between; +} + +.place-content-around { + place-content: space-around; +} + +.place-content-evenly { + place-content: space-evenly; +} + +.place-content-stretch { + place-content: stretch; +} + +.place-self-auto { + place-self: auto; +} + +.place-self-start { + place-self: start; +} + +.place-self-end { + place-self: end; +} + +.place-self-center { + place-self: center; +} + +.place-self-stretch { + place-self: stretch; +} + +.items-start { + align-items: flex-start; +} + +.items-end { + align-items: flex-end; +} + .items-center { align-items: center; } +.items-baseline { + align-items: baseline; +} + .items-stretch { align-items: stretch; } +.content-center { + align-content: center; +} + +.content-start { + align-content: flex-start; +} + +.content-end { + align-content: flex-end; +} + +.content-between { + align-content: space-between; +} + +.content-around { + align-content: space-around; +} + +.content-evenly { + align-content: space-evenly; +} + +.self-auto { + align-self: auto; +} + +.self-start { + align-self: flex-start; +} + +.self-end { + align-self: flex-end; +} + +.self-center { + align-self: center; +} + +.self-stretch { + align-self: stretch; +} + +.justify-items-auto { + justify-items: auto; +} + +.justify-items-start { + justify-items: start; +} + +.justify-items-end { + justify-items: end; +} + +.justify-items-center { + justify-items: center; +} + +.justify-items-stretch { + justify-items: stretch; +} + +.justify-start { + justify-content: flex-start; +} + .justify-end { justify-content: flex-end; } @@ -1553,8 +1670,32 @@ video { justify-content: space-between; } -.content-center { - align-content: center; +.justify-around { + justify-content: space-around; +} + +.justify-evenly { + justify-content: space-evenly; +} + +.justify-self-auto { + justify-self: auto; +} + +.justify-self-start { + justify-self: start; +} + +.justify-self-end { + justify-self: end; +} + +.justify-self-center { + justify-self: center; +} + +.justify-self-stretch { + justify-self: stretch; } .flex-1 { @@ -1573,10 +1714,44 @@ video { flex-grow: 1; } +.flex-shrink { + flex-shrink: 1; +} + +.float-right { + float: right; +} + .float-left { float: left; } +.float-none { + float: none; +} + +.clearfix:after { + content: ""; + display: table; + clear: both; +} + +.clear-left { + clear: left; +} + +.clear-right { + clear: right; +} + +.clear-both { + clear: both; +} + +.clear-none { + clear: none; +} + .font-light { font-weight: 300; } @@ -1585,6 +1760,10 @@ video { font-weight: 400; } +.font-medium { + font-weight: 500; +} + .font-semibold { font-weight: 600; } @@ -1597,6 +1776,10 @@ video { height: 0; } +.h-1 { + height: 0.25rem; +} + .h-2 { height: 0.5rem; } @@ -1621,6 +1804,10 @@ video { height: 4rem; } +.h-20 { + height: 5rem; +} + .h-auto { height: auto; } @@ -1629,6 +1816,30 @@ video { height: 100%; } +.h-screen { + height: 100vh; +} + +.h-95-px { + height: 95px; +} + +.h-350-px { + height: 350px; +} + +.h-500-px { + height: 500px; +} + +.h-600-px { + height: 600px; +} + +.text-55 { + font-size: 55rem; +} + .text-xs { font-size: 0.75rem; } @@ -1665,6 +1876,10 @@ video { font-size: 3rem; } +.text-6xl { + font-size: 4rem; +} + .leading-none { line-height: 1; } @@ -1681,10 +1896,22 @@ video { line-height: 1.625; } +.list-inside { + list-style-position: inside; +} + +.list-outside { + list-style-position: outside; +} + .list-none { list-style-type: none; } +.m-1 { + margin: 0.25rem; +} + .m-2 { margin: 0.5rem; } @@ -1721,6 +1948,11 @@ video { margin-bottom: 1.5rem; } +.my-32 { + margin-top: 8rem; + margin-bottom: 8rem; +} + .mx-auto { margin-left: auto; margin-right: auto; @@ -1842,6 +2074,10 @@ video { margin-top: 5rem; } +.mt-24 { + margin-top: 6rem; +} + .mb-24 { margin-bottom: 6rem; } @@ -1850,6 +2086,10 @@ video { margin-top: 8rem; } +.mt-48 { + margin-top: 12rem; +} + .mr-auto { margin-right: auto; } @@ -1874,6 +2114,10 @@ video { margin-top: -6rem; } +.-mt-32 { + margin-top: -8rem; +} + .-mt-48 { margin-top: -12rem; } @@ -1882,78 +2126,249 @@ video { margin-top: -16rem; } -.max-w-full { - max-width: 100%; +.last\:mr-0:last-child { + margin-right: 0; } -.min-w-0 { - min-width: 0; +.hover\:-mt-4:hover { + margin-top: -1rem; } -.opacity-50 { - opacity: 0.5; +.max-h-860-px { + max-height: 860px; } -.opacity-75 { - opacity: 0.75; +.max-w-sm { + max-width: 24rem; } -.outline-none { - outline: 0; +.max-w-full { + max-width: 100%; } -.focus\:outline-none:focus { - outline: 0; +.max-w-100-px { + max-width: 100px; } -.overflow-hidden { - overflow: hidden; +.max-w-120-px { + max-width: 120px; } -.overflow-x-auto { - overflow-x: auto; +.max-w-150-px { + max-width: 150px; } -.overflow-y-auto { - overflow-y: auto; +.max-w-180-px { + max-width: 180px; } -.overflow-x-hidden { - overflow-x: hidden; +.max-w-200-px { + max-width: 200px; } -.p-3 { - padding: 0.75rem; +.max-w-210-px { + max-width: 210px; } -.p-4 { - padding: 1rem; +.max-w-580-px { + max-width: 580px; } -.p-5 { - padding: 1.25rem; +.min-h-screen { + min-height: 100vh; } -.p-8 { - padding: 2rem; +.min-h-screen-75 { + min-height: 75vh; } -.px-0 { - padding-left: 0; - padding-right: 0; +.min-w-0 { + min-width: 0; } -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; +.min-w-48 { + min-width: 12rem; } -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; +.min-w-140-px { + min-width: 140px; } -.px-2 { +.object-contain { + object-fit: contain; +} + +.object-cover { + object-fit: cover; +} + +.object-fill { + object-fit: fill; +} + +.object-none { + object-fit: none; +} + +.object-scale-down { + object-fit: scale-down; +} + +.opacity-50 { + opacity: 0.5; +} + +.opacity-75 { + opacity: 0.75; +} + +.opacity-80 { + opacity: .8; +} + +.outline-none { + outline: 0; +} + +.focus\:outline-none:focus { + outline: 0; +} + +.overflow-auto { + overflow: auto; +} + +.overflow-hidden { + overflow: hidden; +} + +.overflow-visible { + overflow: visible; +} + +.overflow-scroll { + overflow: scroll; +} + +.overflow-x-auto { + overflow-x: auto; +} + +.overflow-y-auto { + overflow-y: auto; +} + +.overflow-x-hidden { + overflow-x: hidden; +} + +.overflow-y-hidden { + overflow-y: hidden; +} + +.overflow-x-visible { + overflow-x: visible; +} + +.overflow-y-visible { + overflow-y: visible; +} + +.overflow-x-scroll { + overflow-x: scroll; +} + +.overflow-y-scroll { + overflow-y: scroll; +} + +.scrolling-touch { + -webkit-overflow-scrolling: touch; +} + +.scrolling-auto { + -webkit-overflow-scrolling: auto; +} + +.overscroll-auto { + -ms-scroll-chaining: chained; + overscroll-behavior: auto; +} + +.overscroll-contain { + -ms-scroll-chaining: none; + overscroll-behavior: contain; +} + +.overscroll-none { + -ms-scroll-chaining: none; + overscroll-behavior: none; +} + +.overscroll-y-auto { + overscroll-behavior-y: auto; +} + +.overscroll-y-contain { + overscroll-behavior-y: contain; +} + +.overscroll-y-none { + overscroll-behavior-y: none; +} + +.overscroll-x-auto { + overscroll-behavior-x: auto; +} + +.overscroll-x-contain { + overscroll-behavior-x: contain; +} + +.overscroll-x-none { + overscroll-behavior-x: none; +} + +.p-1 { + padding: 0.25rem; +} + +.p-2 { + padding: 0.5rem; +} + +.p-3 { + padding: 0.75rem; +} + +.p-4 { + padding: 1rem; +} + +.p-5 { + padding: 1.25rem; +} + +.p-8 { + padding: 2rem; +} + +.px-0 { + padding-left: 0; + padding-right: 0; +} + +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } @@ -1998,6 +2413,11 @@ video { padding-bottom: 2.5rem; } +.px-12 { + padding-left: 3rem; + padding-right: 3rem; +} + .py-16 { padding-top: 4rem; padding-bottom: 4rem; @@ -2013,6 +2433,11 @@ video { padding-bottom: 6rem; } +.py-40 { + padding-top: 10rem; + padding-bottom: 10rem; +} + .pt-0 { padding-top: 0; } @@ -2077,6 +2502,10 @@ video { padding-top: 4rem; } +.pb-16 { + padding-bottom: 4rem; +} + .pt-20 { padding-top: 5rem; } @@ -2085,14 +2514,34 @@ video { padding-bottom: 5rem; } +.pt-24 { + padding-top: 6rem; +} + +.pt-32 { + padding-top: 8rem; +} + .pb-32 { padding-bottom: 8rem; } +.pb-40 { + padding-bottom: 10rem; +} + +.pt-48 { + padding-top: 12rem; +} + .pb-48 { padding-bottom: 12rem; } +.pb-64 { + padding-bottom: 16rem; +} + .placeholder-gray-400::-webkit-input-placeholder { --placeholder-opacity: 1; color: #cbd5e0; @@ -2121,6 +2570,18 @@ video { pointer-events: none; } +.pointer-events-auto { + pointer-events: auto; +} + +.static { + position: static; +} + +.fixed { + position: fixed; +} + .absolute { position: absolute; } @@ -2129,6 +2590,11 @@ video { position: relative; } +.sticky { + position: -webkit-sticky; + position: sticky; +} + .top-0 { top: 0; } @@ -2153,10 +2619,94 @@ video { bottom: auto; } +.left-auto { + left: auto; +} + +.-right-100 { + right: -100%; +} + +.-top-225-px { + top: -225px; +} + +.-top-160-px { + top: -160px; +} + +.-top-150-px { + top: -150px; +} + +.-top-94-px { + top: -94px; +} + +.-left-50-px { + left: -50px; +} + +.-top-29-px { + top: -29px; +} + +.-left-20-px { + left: -20px; +} + +.top-25-px { + top: 25px; +} + +.left-40-px { + left: 40px; +} + +.top-95-px { + top: 95px; +} + +.left-145-px { + left: 145px; +} + +.left-195-px { + left: 195px; +} + +.top-210-px { + top: 210px; +} + +.left-260-px { + left: 260px; +} + +.resize-none { + resize: none; +} + +.resize-y { + resize: vertical; +} + +.resize-x { + resize: horizontal; +} + +.resize { + resize: both; +} + .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); } +.shadow-md { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } @@ -2165,6 +2715,10 @@ video { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } +.shadow-2xl { + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); +} + .shadow-none { box-shadow: none; } @@ -2185,6 +2739,14 @@ video { fill: currentColor; } +.table-auto { + table-layout: auto; +} + +.table-fixed { + table-layout: fixed; +} + .text-left { text-align: left; } @@ -2197,6 +2759,10 @@ video { text-align: right; } +.text-justify { + text-align: justify; +} + .text-black { --text-opacity: 1; color: #000; @@ -2281,12 +2847,6 @@ video { color: rgba(56, 178, 172, var(--text-opacity)); } -.text-blue-300 { - --text-opacity: 1; - color: #90cdf4; - color: rgba(144, 205, 244, var(--text-opacity)); -} - .text-blue-400 { --text-opacity: 1; color: #63b3ed; @@ -2341,10 +2901,38 @@ video { color: rgba(49, 130, 206, var(--text-opacity)); } +.italic { + font-style: italic; +} + +.not-italic { + font-style: normal; +} + .uppercase { text-transform: uppercase; } +.lowercase { + text-transform: lowercase; +} + +.capitalize { + text-transform: capitalize; +} + +.normal-case { + text-transform: none; +} + +.underline { + text-decoration: underline; +} + +.line-through { + text-decoration: line-through; +} + .no-underline { text-decoration: none; } @@ -2354,1305 +2942,544 @@ video { -moz-osx-font-smoothing: grayscale; } -.tracking-wide { - letter-spacing: 0.025em; +.subpixel-antialiased { + -webkit-font-smoothing: auto; + -moz-osx-font-smoothing: auto; } -.align-middle { - vertical-align: middle; +.ordinal, .slashed-zero, .lining-nums, .oldstyle-nums, .proportional-nums, .tabular-nums, .diagonal-fractions, .stacked-fractions { + --font-variant-numeric-ordinal: var(--tailwind-empty,/*!*/ /*!*/); + --font-variant-numeric-slashed-zero: var(--tailwind-empty,/*!*/ /*!*/); + --font-variant-numeric-figure: var(--tailwind-empty,/*!*/ /*!*/); + --font-variant-numeric-spacing: var(--tailwind-empty,/*!*/ /*!*/); + --font-variant-numeric-fraction: var(--tailwind-empty,/*!*/ /*!*/); + font-variant-numeric: var(--font-variant-numeric-ordinal) var(--font-variant-numeric-slashed-zero) var(--font-variant-numeric-figure) var(--font-variant-numeric-spacing) var(--font-variant-numeric-fraction); } -.whitespace-no-wrap { - white-space: nowrap; +.normal-nums { + font-variant-numeric: normal; } -.break-words { - overflow-wrap: break-word; +.ordinal { + --font-variant-numeric-ordinal: ordinal; } -.w-5 { - width: 1.25rem; +.slashed-zero { + --font-variant-numeric-slashed-zero: slashed-zero; } -.w-8 { - width: 2rem; +.lining-nums { + --font-variant-numeric-figure: lining-nums; } -.w-10 { - width: 2.5rem; +.oldstyle-nums { + --font-variant-numeric-figure: oldstyle-nums; } -.w-12 { - width: 3rem; +.proportional-nums { + --font-variant-numeric-spacing: proportional-nums; } -.w-16 { - width: 4rem; +.tabular-nums { + --font-variant-numeric-spacing: tabular-nums; } -.w-auto { - width: auto; +.diagonal-fractions { + --font-variant-numeric-fraction: diagonal-fractions; } -.w-1\/2 { - width: 50%; +.stacked-fractions { + --font-variant-numeric-fraction: stacked-fractions; } -.w-6\/12 { - width: 50%; +.tracking-wide { + letter-spacing: 0.025em; } -.w-full { - width: 100%; +.select-none { + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } -.z-10 { - z-index: 10; +.select-text { + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; } -.z-40 { - z-index: 40; +.select-all { + -webkit-user-select: all; + -ms-user-select: all; + user-select: all; } -.z-50 { - z-index: 50; +.select-auto { + -webkit-user-select: auto; + -ms-user-select: auto; + user-select: auto; } -.transform { - --transform-translate-x: 0; - --transform-translate-y: 0; - --transform-rotate: 0; - --transform-skew-x: 0; - --transform-skew-y: 0; - --transform-scale-x: 1; - --transform-scale-y: 1; - transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)); +.align-baseline { + vertical-align: baseline; } -.transition { - transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; +.align-top { + vertical-align: top; } -@-webkit-keyframes spin { - to { - transform: rotate(360deg); - } +.align-middle { + vertical-align: middle; } -@keyframes spin { - to { - transform: rotate(360deg); - } +.align-bottom { + vertical-align: bottom; } -@-webkit-keyframes ping { - 75%, 100% { - transform: scale(2); - opacity: 0; - } +.align-text-top { + vertical-align: text-top; } -@keyframes ping { - 75%, 100% { - transform: scale(2); - opacity: 0; - } +.align-text-bottom { + vertical-align: text-bottom; } -@-webkit-keyframes pulse { - 50% { - opacity: .5; - } +.visible { + visibility: visible; } -@keyframes pulse { - 50% { - opacity: .5; - } +.invisible { + visibility: hidden; } -@-webkit-keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); - animation-timing-function: cubic-bezier(0.8,0,1,1); - } - - 50% { - transform: none; - -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); - animation-timing-function: cubic-bezier(0,0,0.2,1); - } +.whitespace-normal { + white-space: normal; } -@keyframes bounce { - 0%, 100% { - transform: translateY(-25%); - -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); - animation-timing-function: cubic-bezier(0.8,0,1,1); - } - - 50% { - transform: none; - -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); - animation-timing-function: cubic-bezier(0,0,0.2,1); - } +.whitespace-no-wrap { + white-space: nowrap; } -@media (min-width: 640px) { - .sm\:container { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .group:hover .sm\:group-hover\:container { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:focus-within\:container:focus-within { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:first\:container:first-child { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:last\:container:last-child { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:odd\:container:nth-child(odd) { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:even\:container:nth-child(even) { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:hover\:container:hover { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:focus\:container:focus { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:active\:container:active { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:visited\:container:visited { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:disabled\:container:disabled { - width: 100%; - } - - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - - .sm\:mt-0 { - margin-top: 0; - } - - .sm\:mr-2 { - margin-right: 0.5rem; - } +.whitespace-pre { + white-space: pre; } -@media (min-width: 768px) { - .md\:container { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .group:hover .md\:group-hover\:container { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:focus-within\:container:focus-within { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:first\:container:first-child { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:last\:container:last-child { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:odd\:container:nth-child(odd) { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:even\:container:nth-child(even) { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:hover\:container:hover { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:focus\:container:focus { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:active\:container:active { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:visited\:container:visited { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:disabled\:container:disabled { - width: 100%; - } - - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - - .md\:block { - display: block; - } +.whitespace-pre-line { + white-space: pre-line; +} - .md\:flex { - display: flex; - } +.whitespace-pre-wrap { + white-space: pre-wrap; +} - .md\:hidden { - display: none; - } +.break-normal { + overflow-wrap: normal; + word-break: normal; +} - .md\:flex-row { - flex-direction: row; - } +.break-words { + overflow-wrap: break-word; +} - .md\:flex-col { - flex-direction: column; - } +.break-all { + word-break: break-all; +} - .md\:flex-no-wrap { - flex-wrap: nowrap; - } +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} - .md\:items-stretch { - align-items: stretch; - } +.w-1 { + width: 0.25rem; +} - .md\:justify-start { - justify-content: flex-start; - } +.w-5 { + width: 1.25rem; +} - .md\:justify-end { - justify-content: flex-end; - } +.w-8 { + width: 2rem; +} - .md\:justify-between { - justify-content: space-between; - } +.w-10 { + width: 2.5rem; +} - .md\:mt-4 { - margin-top: 1rem; - } +.w-12 { + width: 3rem; +} - .md\:mb-4 { - margin-bottom: 1rem; - } +.w-16 { + width: 4rem; +} - .md\:ml-64 { - margin-left: 16rem; - } +.w-auto { + width: auto; +} - .md\:min-h-full { - min-height: 100%; - } +.w-1\/2 { + width: 50%; +} - .md\:min-w-full { - min-width: 100%; - } +.w-6\/12 { + width: 50%; +} - .md\:opacity-100 { - opacity: 1; - } +.w-10\/12 { + width: 83.333333%; +} - .md\:overflow-hidden { - overflow: hidden; - } +.w-full { + width: 100%; +} - .md\:overflow-y-auto { - overflow-y: auto; - } +.z-2 { + z-index: 2; +} - .md\:px-10 { - padding-left: 2.5rem; - padding-right: 2.5rem; - } +.z-3 { + z-index: 3; +} - .md\:pb-2 { - padding-bottom: 0.5rem; - } +.z-10 { + z-index: 10; +} - .md\:pr-12 { - padding-right: 3rem; - } +.z-40 { + z-index: 40; +} - .md\:pt-32 { - padding-top: 8rem; - } +.z-50 { + z-index: 50; +} - .md\:fixed { - position: fixed; - } +.grid-flow-row { + grid-auto-flow: row; +} - .md\:relative { - position: relative; - } +.grid-flow-col { + grid-auto-flow: column; +} - .md\:top-0 { - top: 0; - } +.grid-flow-row-dense { + grid-auto-flow: row dense; +} - .md\:bottom-0 { - bottom: 0; - } +.grid-flow-col-dense { + grid-auto-flow: column dense; +} - .md\:left-0 { - left: 0; - } +.transform { + --transform-translate-x: 0; + --transform-translate-y: 0; + --transform-rotate: 0; + --transform-skew-x: 0; + --transform-skew-y: 0; + --transform-scale-x: 1; + --transform-scale-y: 1; + transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)); +} - .md\:shadow-none { - box-shadow: none; - } +.transform-none { + transform: none; +} - .md\:w-64 { - width: 16rem; - } +.rotate-90 { + --transform-rotate: 90deg; +} - .md\:w-4\/12 { - width: 33.333333%; - } +.rotate-180 { + --transform-rotate: 180deg; +} - .md\:w-5\/12 { - width: 41.666667%; - } +.transition-all { + transition-property: all; +} - .md\:w-6\/12 { - width: 50%; - } +.transition { + transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; +} - .md\:w-8\/12 { - width: 66.666667%; - } +.ease-linear { + transition-timing-function: linear; } -@media (min-width: 1024px) { - .lg\:container { - width: 100%; - } +.ease-in { + transition-timing-function: cubic-bezier(0.4, 0, 1, 1); +} - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } - } +.ease-out { + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); +} - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } - } +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } - } +.duration-150 { + transition-duration: 150ms; +} - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } +@-webkit-keyframes spin { + to { + transform: rotate(360deg); } +} - .group:hover .lg\:group-hover\:container { - width: 100%; +@keyframes spin { + to { + transform: rotate(360deg); } +} - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } +@-webkit-keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; } +} - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } +@keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; } +} - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } +@-webkit-keyframes pulse { + 50% { + opacity: .5; } +} - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } +@keyframes pulse { + 50% { + opacity: .5; } +} - .lg\:focus-within\:container:focus-within { - width: 100%; +@-webkit-keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); } - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); } +} - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } +@keyframes bounce { + 0%, 100% { + transform: translateY(-25%); + -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1); + animation-timing-function: cubic-bezier(0.8,0,1,1); } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + 50% { + transform: none; + -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1); + animation-timing-function: cubic-bezier(0,0,0.2,1); } +} - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } - } +.animate-spin { + -webkit-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} - .lg\:first\:container:first-child { - width: 100%; +@media (min-width: 640px) { + .sm\:block { + display: block; } - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } + .sm\:mt-0 { + margin-top: 0; } - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } + .sm\:ml-1 { + margin-left: 0.25rem; } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + .sm\:mr-2 { + margin-right: 0.5rem; } - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } + .sm\:pt-0 { + padding-top: 0; } - .lg\:last\:container:last-child { - width: 100%; + .sm\:w-6\/12 { + width: 50%; } +} - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } +@media (min-width: 768px) { + .md\:block { + display: block; } - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } + .md\:flex { + display: flex; } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + .md\:hidden { + display: none; } - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } + .md\:flex-row { + flex-direction: row; } - .lg\:odd\:container:nth-child(odd) { - width: 100%; + .md\:flex-col { + flex-direction: column; } - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } + .md\:flex-no-wrap { + flex-wrap: nowrap; } - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } + .md\:items-stretch { + align-items: stretch; } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + .md\:justify-start { + justify-content: flex-start; } - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } + .md\:justify-end { + justify-content: flex-end; } - .lg\:even\:container:nth-child(even) { - width: 100%; + .md\:justify-between { + justify-content: space-between; } - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } + .md\:mt-0 { + margin-top: 0; } - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } + .md\:mt-4 { + margin-top: 1rem; } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + .md\:mb-4 { + margin-bottom: 1rem; } - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } + .md\:mt-40 { + margin-top: 10rem; } - .lg\:hover\:container:hover { - width: 100%; + .md\:mt-64 { + margin-top: 16rem; } - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } + .md\:ml-64 { + margin-left: 16rem; } - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } + .md\:min-h-full { + min-height: 100%; } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + .md\:min-w-full { + min-width: 100%; } - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } + .md\:opacity-100 { + opacity: 1; } - .lg\:focus\:container:focus { - width: 100%; + .md\:overflow-hidden { + overflow: hidden; } - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } + .md\:overflow-y-auto { + overflow-y: auto; } - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } + .md\:px-4 { + padding-left: 1rem; + padding-right: 1rem; } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + .md\:px-10 { + padding-left: 2.5rem; + padding-right: 2.5rem; } - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } + .md\:pt-0 { + padding-top: 0; } - .lg\:active\:container:active { - width: 100%; + .md\:pb-2 { + padding-bottom: 0.5rem; } - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } + .md\:pr-12 { + padding-right: 3rem; } - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } + .md\:pt-32 { + padding-top: 8rem; } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + .md\:fixed { + position: fixed; } - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } + .md\:relative { + position: relative; } - .lg\:visited\:container:visited { - width: 100%; + .md\:top-0 { + top: 0; } - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } + .md\:bottom-0 { + bottom: 0; } - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } + .md\:left-0 { + left: 0; } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + .md\:shadow-none { + box-shadow: none; } - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } + .md\:text-left { + text-align: left; } - .lg\:disabled\:container:disabled { - width: 100%; + .md\:w-64 { + width: 16rem; } - @media (min-width: 640px) { - .lg\:container { - max-width: 640px; - } + .md\:w-4\/12 { + width: 33.333333%; } - @media (min-width: 768px) { - .lg\:container { - max-width: 768px; - } + .md\:w-5\/12 { + width: 41.666667%; } - @media (min-width: 1024px) { - .lg\:container { - max-width: 1024px; - } + .md\:w-6\/12 { + width: 50%; } - @media (min-width: 1280px) { - .lg\:container { - max-width: 1280px; - } + .md\:w-8\/12 { + width: 66.666667%; } +} +@media (min-width: 1024px) { .lg\:bg-transparent { background-color: transparent; } @@ -3709,6 +3536,10 @@ video { margin-right: 1rem; } + .lg\:mt-16 { + margin-top: 4rem; + } + .lg\:ml-auto { margin-left: auto; } @@ -3763,6 +3594,10 @@ video { box-shadow: none; } + .lg\:text-left { + text-align: left; + } + .lg\:text-right { text-align: right; } @@ -3811,342 +3646,6 @@ video { } @media (min-width: 1280px) { - .xl\:container { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .group:hover .xl\:group-hover\:container { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:focus-within\:container:focus-within { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:first\:container:first-child { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:last\:container:last-child { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:odd\:container:nth-child(odd) { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:even\:container:nth-child(even) { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:hover\:container:hover { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:focus\:container:focus { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:active\:container:active { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:visited\:container:visited { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - - .xl\:disabled\:container:disabled { - width: 100%; - } - - @media (min-width: 640px) { - .xl\:container { - max-width: 640px; - } - } - - @media (min-width: 768px) { - .xl\:container { - max-width: 768px; - } - } - - @media (min-width: 1024px) { - .xl\:container { - max-width: 1024px; - } - } - - @media (min-width: 1280px) { - .xl\:container { - max-width: 1280px; - } - } - .xl\:mb-0 { margin-bottom: 0; } @@ -4159,6 +3658,10 @@ video { width: 33.333333%; } + .xl\:w-6\/12 { + width: 50%; + } + .xl\:w-8\/12 { width: 66.666667%; } diff --git a/components/Cards/CardBarChart.js b/components/Cards/CardBarChart.js index e0ff4c93..590b60d5 100644 --- a/components/Cards/CardBarChart.js +++ b/components/Cards/CardBarChart.js @@ -22,17 +22,17 @@ export default function CardBarChart() { borderColor: "#ed64a6", data: [30, 78, 56, 34, 100, 45, 13], fill: false, - barThickness: 8, + barThickness: 8 }, { label: new Date().getFullYear() - 1, fill: false, - backgroundColor: "#3182ce", - borderColor: "#3182ce", + backgroundColor: "#4c51bf", + borderColor: "#4c51bf", data: [27, 68, 86, 74, 10, 4, 87], - barThickness: 8, - }, - ], + barThickness: 8 + } + ] }, options: { maintainAspectRatio: false, @@ -115,7 +115,7 @@ export default function CardBarChart() {
{/* Chart */} -
+
diff --git a/components/Cards/CardLineChart.js b/components/Cards/CardLineChart.js index 55401742..823e3ee5 100644 --- a/components/Cards/CardLineChart.js +++ b/components/Cards/CardLineChart.js @@ -18,19 +18,19 @@ export default function CardLineChart() { datasets: [ { label: new Date().getFullYear(), - backgroundColor: "#3182ce", - borderColor: "#3182ce", + backgroundColor: "#4c51bf", + borderColor: "#4c51bf", data: [65, 78, 66, 44, 56, 67, 75], - fill: false, + fill: false }, { label: new Date().getFullYear() - 1, fill: false, - backgroundColor: "#ed64a6", - borderColor: "#ed64a6", - data: [40, 68, 86, 74, 56, 60, 87], - }, - ], + backgroundColor: "#fff", + borderColor: "#fff", + data: [40, 68, 86, 74, 56, 60, 87] + } + ] }, options: { maintainAspectRatio: false, @@ -108,7 +108,7 @@ export default function CardLineChart() { }, []); return ( <> -
+
@@ -121,7 +121,7 @@ export default function CardLineChart() {
{/* Chart */} -
+
diff --git a/components/Cards/CardPageVisits.js b/components/Cards/CardPageVisits.js index bfd811ad..f4eda66a 100644 --- a/components/Cards/CardPageVisits.js +++ b/components/Cards/CardPageVisits.js @@ -15,9 +15,8 @@ export default function CardPageVisits() {
diff --git a/components/Cards/CardProfile.js b/components/Cards/CardProfile.js index bdbc9393..ecbc5a49 100644 --- a/components/Cards/CardProfile.js +++ b/components/Cards/CardProfile.js @@ -13,8 +13,7 @@ export default function CardProfile() { ...
diff --git a/components/Cards/CardSettings.js b/components/Cards/CardSettings.js index 6ff6e263..54499da7 100644 --- a/components/Cards/CardSettings.js +++ b/components/Cards/CardSettings.js @@ -10,9 +10,8 @@ export default function CardSettings() {
My account
@@ -34,9 +33,8 @@ export default function CardSettings() {
@@ -50,9 +48,8 @@ export default function CardSettings() {
@@ -66,9 +63,8 @@ export default function CardSettings() {
@@ -82,9 +78,8 @@ export default function CardSettings() { @@ -106,9 +101,8 @@ export default function CardSettings() { @@ -122,9 +116,8 @@ export default function CardSettings() { @@ -138,9 +131,8 @@ export default function CardSettings() { @@ -154,9 +146,8 @@ export default function CardSettings() { @@ -178,13 +169,11 @@ export default function CardSettings() { + defaultValue="A beautiful Dashboard for NextJS & Tailwind CSS. It is Free + and Open Source." + > diff --git a/components/Cards/CardSocialTraffic.js b/components/Cards/CardSocialTraffic.js index 0035d1cf..89944abc 100644 --- a/components/Cards/CardSocialTraffic.js +++ b/components/Cards/CardSocialTraffic.js @@ -15,9 +15,8 @@ export default function CardSocialTraffic() {
@@ -35,10 +34,7 @@ export default function CardSocialTraffic() { Visitors - + diff --git a/components/Cards/CardTable.js b/components/Cards/CardTable.js index e44036de..e47090ca 100644 --- a/components/Cards/CardTable.js +++ b/components/Cards/CardTable.js @@ -11,7 +11,7 @@ export default function CardTable({ color }) {
@@ -38,7 +38,7 @@ export default function CardTable({ color }) { "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " + (color === "light" ? "bg-gray-100 text-gray-600 border-gray-200" - : "bg-blue-800 text-blue-300 border-blue-700") + : "bg-gray-700 text-gray-300 border-gray-600") } > Project @@ -48,7 +48,7 @@ export default function CardTable({ color }) { "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " + (color === "light" ? "bg-gray-100 text-gray-600 border-gray-200" - : "bg-blue-800 text-blue-300 border-blue-700") + : "bg-gray-700 text-gray-300 border-gray-600") } > Budget @@ -58,7 +58,7 @@ export default function CardTable({ color }) { "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " + (color === "light" ? "bg-gray-100 text-gray-600 border-gray-200" - : "bg-blue-800 text-blue-300 border-blue-700") + : "bg-gray-700 text-gray-300 border-gray-600") } > Status @@ -68,7 +68,7 @@ export default function CardTable({ color }) { "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " + (color === "light" ? "bg-gray-100 text-gray-600 border-gray-200" - : "bg-blue-800 text-blue-300 border-blue-700") + : "bg-gray-700 text-gray-300 border-gray-600") } > Users @@ -78,7 +78,7 @@ export default function CardTable({ color }) { "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " + (color === "light" ? "bg-gray-100 text-gray-600 border-gray-200" - : "bg-blue-800 text-blue-300 border-blue-700") + : "bg-gray-700 text-gray-300 border-gray-600") } > Completion @@ -88,7 +88,7 @@ export default function CardTable({ color }) { "px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-no-wrap font-semibold text-left " + (color === "light" ? "bg-gray-100 text-gray-600 border-gray-200" - : "bg-blue-800 text-blue-300 border-blue-700") + : "bg-gray-700 text-gray-300 border-gray-600") } > diff --git a/components/Dropdowns/IndexDropdown.js b/components/Dropdowns/IndexDropdown.js new file mode 100644 index 00000000..d515e4b2 --- /dev/null +++ b/components/Dropdowns/IndexDropdown.js @@ -0,0 +1,147 @@ +import React from "react"; +import Link from "next/link"; +import { createPopper } from "@popperjs/core"; + +const IndexDropdown = () => { + // dropdown props + const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); + const btnDropdownRef = React.createRef(); + const popoverDropdownRef = React.createRef(); + const openDropdownPopover = () => { + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { + placement: "bottom-start", + }); + setDropdownPopoverShow(true); + }; + const closeDropdownPopover = () => { + setDropdownPopoverShow(false); + }; + return ( + <> + { + e.preventDefault(); + dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); + }} + > + Demo Pages + +
+ + Admin Layout + + + + Dashboard + + + + + Settings + + + + + Tables + + + + + Maps + + +
+ + Auth Layout + + + + Login + + + + + Register + + +
+ + No Layout + + + + Lading + + + + + Profile + + +
+ + ); +}; + +export default IndexDropdown; diff --git a/components/Dropdowns/NotificationDropdown.js b/components/Dropdowns/NotificationDropdown.js index 450967f3..01556133 100644 --- a/components/Dropdowns/NotificationDropdown.js +++ b/components/Dropdowns/NotificationDropdown.js @@ -1,5 +1,5 @@ import React from "react"; -import Popper from "popper.js"; +import { createPopper } from "@popperjs/core"; const NotificationDropdown = () => { // dropdown props @@ -7,9 +7,8 @@ const NotificationDropdown = () => { const btnDropdownRef = React.createRef(); const popoverDropdownRef = React.createRef(); const openDropdownPopover = () => { - console.log("hey"); - new Popper(btnDropdownRef.current, popoverDropdownRef.current, { - placement: "bottom-end", + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { + placement: "bottom-start", }); setDropdownPopoverShow(true); }; @@ -33,9 +32,8 @@ const NotificationDropdown = () => { ref={popoverDropdownRef} className={ (dropdownPopoverShow ? "block " : "hidden ") + - "bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1" + "bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48" } - style={{ minWidth: "12rem" }} > { // dropdown props @@ -8,8 +8,8 @@ const PagesDropdown = () => { const btnDropdownRef = React.createRef(); const popoverDropdownRef = React.createRef(); const openDropdownPopover = () => { - new Popper(btnDropdownRef.current, popoverDropdownRef.current, { - placement: "bottom-end", + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { + placement: "bottom-start", }); setDropdownPopoverShow(true); }; @@ -33,9 +33,8 @@ const PagesDropdown = () => { ref={popoverDropdownRef} className={ (dropdownPopoverShow ? "block " : "hidden ") + - "bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1" + "bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48" } - style={{ minWidth: "12rem" }} > { > Admin Layout - - Dashboard + + + Dashboard + - - Settings + + + Settings + - - Tables + + + Tables + - - Maps + + + Maps +
{ > Auth Layout - - Login + + + Login + - - Register + + + Register +
{ > No Layout - - Lading + + + Lading + - - Profile + + + Profile +
diff --git a/components/Dropdowns/TableDropdown.js b/components/Dropdowns/TableDropdown.js index 61c01859..d75cd12f 100644 --- a/components/Dropdowns/TableDropdown.js +++ b/components/Dropdowns/TableDropdown.js @@ -1,5 +1,5 @@ import React from "react"; -import Popper from "popper.js"; +import { createPopper } from "@popperjs/core"; const NotificationDropdown = () => { // dropdown props @@ -7,7 +7,7 @@ const NotificationDropdown = () => { const btnDropdownRef = React.createRef(); const popoverDropdownRef = React.createRef(); const openDropdownPopover = () => { - new Popper(btnDropdownRef.current, popoverDropdownRef.current, { + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { placement: "left-start", }); setDropdownPopoverShow(true); @@ -32,9 +32,8 @@ const NotificationDropdown = () => { ref={popoverDropdownRef} className={ (dropdownPopoverShow ? "block " : "hidden ") + - "bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1" + "bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48" } - style={{ minWidth: "12rem" }} > { // dropdown props @@ -7,8 +7,8 @@ const UserDropdown = () => { const btnDropdownRef = React.createRef(); const popoverDropdownRef = React.createRef(); const openDropdownPopover = () => { - new Popper(btnDropdownRef.current, popoverDropdownRef.current, { - placement: "bottom-end", + createPopper(btnDropdownRef.current, popoverDropdownRef.current, { + placement: "bottom-start", }); setDropdownPopoverShow(true); }; @@ -40,9 +40,8 @@ const UserDropdown = () => { ref={popoverDropdownRef} className={ (dropdownPopoverShow ? "block " : "hidden ") + - "bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1" + "bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg min-w-48" } - style={{ minWidth: "12rem" }} >