├── .gitignore
├── README.md
├── images
    ├── avatar.jpg
    └── logo.png
├── index.html
├── package-lock.json
├── package.json
├── screenshot.jpg
├── screenshot1.jpg
├── style
    ├── style.css
    └── tailwind.css
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
  1 | index-dev.html
  2 | design.jp*g
  3 | design.png
  4 | movie2.webp
  5 | movie3.webp
  6 | /screenshots/
  7 | 
  8 | 
  9 | ### macOS ###
 10 | # General
 11 | .DS_Store
 12 | .AppleDouble
 13 | .LSOverride
 14 | 
 15 | # Icon must end with two \r
 16 | Icon
 17 | 
 18 | 
 19 | # Thumbnails
 20 | ._*
 21 | 
 22 | # Files that might appear in the root of a volume
 23 | .DocumentRevisions-V100
 24 | .fseventsd
 25 | .Spotlight-V100
 26 | .TemporaryItems
 27 | .Trashes
 28 | .VolumeIcon.icns
 29 | .com.apple.timemachine.donotpresent
 30 | 
 31 | # Directories potentially created on remote AFP share
 32 | .AppleDB
 33 | .AppleDesktop
 34 | Network Trash Folder
 35 | Temporary Items
 36 | .apdisk
 37 | 
 38 | ### Node ###
 39 | # Logs
 40 | logs
 41 | *.log
 42 | npm-debug.log*
 43 | yarn-debug.log*
 44 | yarn-error.log*
 45 | lerna-debug.log*
 46 | .pnpm-debug.log*
 47 | 
 48 | # Diagnostic reports (https://nodejs.org/api/report.html)
 49 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 50 | 
 51 | # Runtime data
 52 | pids
 53 | *.pid
 54 | *.seed
 55 | *.pid.lock
 56 | 
 57 | # Directory for instrumented libs generated by jscoverage/JSCover
 58 | lib-cov
 59 | 
 60 | 
 61 | 
 62 | 
 63 | 
 64 | # Bower dependency directory (https://bower.io/)
 65 | bower_components
 66 | 
 67 | # node-waf configuration
 68 | .lock-wscript
 69 | 
 70 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 71 | build/Release
 72 | 
 73 | # Dependency directories
 74 | node_modules/
 75 | jspm_packages/
 76 | 
 77 | # Snowpack dependency directory (https://snowpack.dev/)
 78 | web_modules/
 79 | 
 80 | 
 81 | 
 82 | # Optional npm cache directory
 83 | .npm
 84 | 
 85 | # Optional eslint cache
 86 | .eslintcache
 87 | 
 88 | # Optional stylelint cache
 89 | .stylelintcache
 90 | 
 91 | # Microbundle cache
 92 | .rpt2_cache/
 93 | .rts2_cache_cjs/
 94 | .rts2_cache_es/
 95 | .rts2_cache_umd/
 96 | 
 97 | 
 98 | 
 99 | # Output of 'npm pack'
100 | *.tgz
101 | 
102 | # Yarn Integrity file
103 | .yarn-integrity
104 | 
105 | # dotenv environment variable files
106 | .env
107 | .env.development.local
108 | .env.test.local
109 | .env.production.local
110 | .env.local
111 | 
112 | 
113 | # Stores VSCode versions used for testing VSCode extensions
114 | .vscode-test
115 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Tailwindcss Client Dashboard Template (MClient)
 3 | 
 4 | A responsive dashboard template for managing and monitoring clients which has been designed with Tailwindcss and Alpine.js.
 5 | 
 6 | It's designed to adapt to different screen sizes from mobile phone to extra wide screens.
 7 | 
 8 | 
 9 | ## Screenshots
10 | 
11 | ![App Screenshot](screenshot.jpg)
12 | ![App Screenshot](screenshot1.jpg)
13 | 
14 | ## Installation & Development
15 | 
16 | For furthur development, Tailwindcss and Node.js dependencies need to be installed by npm.
17 | 
18 | ```bash
19 |   npm install 
20 | ```
21 | 
22 | In development, Tailwind CLI will be needed to watch and build the style.css
23 | 
24 | ```bash
25 |   npm run build 
26 | ```
27 | 
28 | ## Support & Further Development
29 | 
30 | Feel free to download, fork and use the template.
31 | 
32 | More pages are in development to be merged into current template repository.
33 | 
34 | Show your support and interest by sharing and make it starred.
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/images/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mazyar1128/tailwindcss-client-dashboard/a918981ea1dd6a35e62c94ebb8e1691f8eb3cd21/images/avatar.jpg


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mazyar1128/tailwindcss-client-dashboard/a918981ea1dd6a35e62c94ebb8e1691f8eb3cd21/images/logo.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="author" content="Mazyar">
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 |     <link href="style/style.css" rel="stylesheet">
 10 |     <meta name="author" content="Mazyar">
 11 |     <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
 12 |     <title>MClient Dashboard</title>
 13 | 
 14 | </head>
 15 | 
 16 | <body class="relative min-h-screen font-poppins antialiased text-sm bg-white flex text-gray-800 h-full 2xl:max-w-[1920px] 2xl:mx-auto 2xl:border-r-2" x-data="{ showMenu: false }">
 17 | 
 18 |     <aside class="flex flex-col lg:flex lg:flex-col justify-between shadow-xl lg:shadow-none lg:fixed min-h-screen top-0 z-20  bg-[#151e29]  w-fit bottom-0 lg:w-60 px-3 lg:px-6 pt-6  pb-0" :class="showMenu ? 'fixed' : 'hidden'" x-transition.duration.500ms>
 19 |         <div>
 20 |             <div class="flex font-semibold text-lg  items-center justify-center space-x-2">
 21 |                 <span>
 22 |                     <img class="w-12 h-12" src="images/logo.png" alt="" srcset="">
 23 |                 </span>
 24 |                 <span class="tracking-wide text-white">MClient Inc.</span>
 25 |             </div>
 26 | 
 27 |             <div class="mt-12">
 28 |                 <div class="flex flex-col space-y-2 text-base font-medium ">
 29 |                     <a class=" rounded-md px-3 py-3 text-gray-300 flex items-center hover:bg-gray-700 hover:text-white  transition ease-in-out justify-between space-x-2" href="#">
 30 |                         <span>
 31 |                             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
 32 |                                 <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h2.25a3 3 0 013 3v2.25a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm9.75 0a3 3 0 013-3H18a3 3 0 013 3v2.25a3 3 0 01-3 3h-2.25a3 3 0 01-3-3V6zM3 15.75a3 3 0 013-3h2.25a3 3 0 013 3V18a3 3 0 01-3 3H6a3 3 0 01-3-3v-2.25zm9.75 0a3 3 0 013-3H18a3 3 0 013 3V18a3 3 0 01-3 3h-2.25a3 3 0 01-3-3v-2.25z" clip-rule="evenodd"></path>
 33 |                             </svg>
 34 |                         </span>
 35 |                         <span class="flex-1 pl-2">Dashboard</span>
 36 |                     </a>
 37 |                     <a class="bg-gray-700 rounded-md px-3 py-3 text-white flex items-center justify-between space-x-2  " href="#">
 38 |                         <span>
 39 |                             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
 40 |                                 <path fill-rule="evenodd" d="M8.25 6.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM15.75 9.75a3 3 0 116 0 3 3 0 01-6 0zM2.25 9.75a3 3 0 116 0 3 3 0 01-6 0zM6.31 15.117A6.745 6.745 0 0112 12a6.745 6.745 0 016.709 7.498.75.75 0 01-.372.568A12.696 12.696 0 0112 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 01-.372-.568 6.787 6.787 0 011.019-4.38z" clip-rule="evenodd"></path>
 41 |                                 <path d="M5.082 14.254a8.287 8.287 0 00-1.308 5.135 9.687 9.687 0 01-1.764-.44l-.115-.04a.563.563 0 01-.373-.487l-.01-.121a3.75 3.75 0 013.57-4.047zM20.226 19.389a8.287 8.287 0 00-1.308-5.135 3.75 3.75 0 013.57 4.047l-.01.121a.563.563 0 01-.373.486l-.115.04c-.567.2-1.156.349-1.764.441z"></path>
 42 |                             </svg>
 43 |                         </span>
 44 |                         <span class="flex-1 pl-2 ">Clients</span>
 45 |                         <span class="text-xs text-white px-3 py-0.5 bg-primary justify-self-end rounded-full text-center">8</span>
 46 |                     </a>
 47 |                     <a class=" rounded-md px-3 py-3 text-gray-300 flex items-center hover:bg-gray-700 hover:text-white  transition ease-in-out justify-between space-x-2" href="#">
 48 |                         <span>
 49 |                             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
 50 |                                 <path fill-rule="evenodd" d="M7.5 6v.75H5.513c-.96 0-1.764.724-1.865 1.679l-1.263 12A1.875 1.875 0 004.25 22.5h15.5a1.875 1.875 0 001.865-2.071l-1.263-12a1.875 1.875 0 00-1.865-1.679H16.5V6a4.5 4.5 0 10-9 0zM12 3a3 3 0 00-3 3v.75h6V6a3 3 0 00-3-3zm-3 8.25a3 3 0 106 0v-.75a.75.75 0 011.5 0v.75a4.5 4.5 0 11-9 0v-.75a.75.75 0 011.5 0v.75z" clip-rule="evenodd"></path>
 51 |                             </svg>
 52 |                         </span>
 53 |                         <span class="flex-1 pl-2 ">Baskets</span>
 54 |                     </a>
 55 |                     <a class=" rounded-md px-3 py-3 text-gray-300 flex items-center hover:bg-gray-700 hover:text-white  transition ease-in-out justify-between space-x-2" href="#">
 56 |                         <span>
 57 |                             <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 58 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
 59 |                             </svg>
 60 |                         </span>
 61 |                         <span class="flex-1 pl-2 ">Billing</span>
 62 |                     </a>
 63 |                     <a class=" rounded-md px-3 py-3 text-gray-300 flex items-center hover:bg-gray-700 hover:text-white  transition ease-in-out justify-between space-x-2" href="#">
 64 |                         <span>
 65 |                             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
 66 |                                 <path d="M12.378 1.602a.75.75 0 00-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03zM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 00.372-.648V7.93zM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 00.372.648l8.628 5.033z"></path>
 67 |                             </svg>
 68 |                         </span>
 69 |                         <span class="flex-1 pl-2 ">Products</span>
 70 |                     </a>
 71 |                     <a class=" rounded-md px-3 py-3 text-gray-300 flex items-center hover:bg-gray-700 hover:text-white  transition ease-in-out justify-between space-x-2" href="#">
 72 |                         <span>
 73 |                             <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
 74 |                                 <path fill-rule="evenodd" d="M19.449 8.448L16.388 11a4.52 4.52 0 010 2.002l3.061 2.55a8.275 8.275 0 000-7.103zM15.552 19.45L13 16.388a4.52 4.52 0 01-2.002 0l-2.55 3.061a8.275 8.275 0 007.103 0zM4.55 15.552L7.612 13a4.52 4.52 0 010-2.002L4.551 8.45a8.275 8.275 0 000 7.103zM8.448 4.55L11 7.612a4.52 4.52 0 012.002 0l2.55-3.061a8.275 8.275 0 00-7.103 0zm8.657-.86a9.776 9.776 0 011.79 1.415 9.776 9.776 0 011.414 1.788 9.764 9.764 0 010 10.211 9.777 9.777 0 01-1.415 1.79 9.777 9.777 0 01-1.788 1.414 9.764 9.764 0 01-10.212 0 9.776 9.776 0 01-1.788-1.415 9.776 9.776 0 01-1.415-1.788 9.764 9.764 0 010-10.212 9.774 9.774 0 011.415-1.788A9.774 9.774 0 016.894 3.69a9.764 9.764 0 0110.211 0zM14.121 9.88a2.985 2.985 0 00-1.11-.704 3.015 3.015 0 00-2.022 0 2.985 2.985 0 00-1.11.704c-.326.325-.56.705-.704 1.11a3.015 3.015 0 000 2.022c.144.405.378.785.704 1.11.325.326.705.56 1.11.704.652.233 1.37.233 2.022 0a2.985 2.985 0 001.11-.704c.326-.325.56-.705.704-1.11a3.016 3.016 0 000-2.022 2.985 2.985 0 00-.704-1.11z" clip-rule="evenodd"></path>
 75 |                             </svg>
 76 |                         </span>
 77 |                         <span class="flex-1 pl-2 ">Support</span>
 78 |                     </a>
 79 |                     <a class=" rounded-md px-3 py-3 text-gray-300 flex items-center hover:bg-gray-700 hover:text-white  transition ease-in-out justify-between space-x-2" href="#">
 80 |                         <span>
 81 |                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
 82 |                                 <path fill-rule="evenodd" d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" clip-rule="evenodd" />
 83 |                             </svg>                              
 84 |                         </span>
 85 |                         <span class="flex-1 pl-2 ">Settings</span>
 86 |                     </a>
 87 |                 </div>
 88 |             </div>
 89 |         </div>
 90 | 
 91 |         <div class="flex items-center justify-between bg-gray-800 text-white -mx-3 lg:-mx-6 px-6 lg:px-9 py-3  border-t-gray-500">
 92 | 
 93 |             <div class="flex items-center ">
 94 |                 <a class href="#">
 95 |                     <img class="rounded-full w-10 h-10" src="images/avatar.jpg" alt srcset>
 96 |                 </a>
 97 |                 <a href="#" class="rounded-full bg-primary -ml-1.5 border-2 border-gray-800">
 98 |                     <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
 99 |                         <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path>
100 |                     </svg>
101 |                 </a>
102 |             </div>
103 |             <a href="#" class=" text-gray-300 flex items-start hover:text-gray-200">
104 |                 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
105 |                     <path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"></path>
106 |                 </svg>
107 |                 <span class="rounded-full bg-orange-400 text-xxs text-white w-2.5 h-2.5 -ml-3 flex items-center justify-center">
108 |                 </span>
109 |             </a>
110 | 
111 |         </div>
112 |     </aside>
113 | 
114 |     <main class="bg-white min-h-screen lg:ml-60 flex w-full">
115 |         <!-- Screen Overlay shows on small screen showMenu -->
116 |         <div class="absolute lg:hidden left-0 top-0 h-full w-full bg-black/30 z-[15]" @click="showMenu = false" x-show="showMenu" x-transition.opacity.duration.500ms>
117 |         </div>
118 |         
119 |         <!-- Filters Side-->
120 |         <aside class="hidden sm:block w-48 md:w-60 2xl:w-80 bg-gray-50 py-5 lg:py-10 px-2 md:px-4 text-sm">
121 |              <!-- Logo on small screens -->
122 |              <div class="sm:flex lg:hidden font-semibold text-lg justify-center items-center space-x-1 mb-8">
123 |                 <span>
124 |                     <img class="w-12 h-12 drop-shadow-sm" src="images/logo.png" alt="" srcset="">
125 |                 </span>
126 |                 <span class="tracking-wide text-gray-900">MClient Inc.</span>
127 |             </div>
128 | 
129 |             <div class="text-gray-500 tracking-wider font-medium uppercase">Filters</div>
130 | 
131 |             <!-- Tags Section -->
132 |             <div class="border-b mt-8 pb-3">
133 |                 <div class="text-gray-700 flex items-center justify-between mb-3">
134 |                     <span>Tags</span>
135 |                     <span>
136 |                         <svg class="w-3.5 h-3.5 fill-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
137 |                             <path d="M98 190.06l139.78 163.12h-.001c8.62 10.06 23.77 11.22 33.84 2.59 .93-.8 1.8-1.67 2.59-2.6l139.78-163.12c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62Z"></path>
138 |                             
139 | 
140 |                         </svg>
141 |                     </span>
142 |                 </div>
143 |                 <div class="mt-1 text-xs text-gray-500">
144 |                     <div class="bg-gray-200 rounded-full px-1.5 py-1 items-center space-x-1 inline-flex">
145 |                         <span>Equals</span>
146 |                         <span>
147 |                             <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
148 |                                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
149 |                             </svg>
150 |                         </span>
151 |                     </div>
152 |                 </div>
153 |             </div>
154 | 
155 |             <!-- Email Section -->
156 |             <div class="border-b mt-5 pb-3">
157 |                 <div class="text-gray-700 flex items-center justify-between mb-3">
158 |                     <span>Email</span>
159 |                     <span>
160 |                         <svg class="w-3.5 h-3.5 fill-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
161 |                             <path d="M98 190.06l139.78 163.12h-.001c8.62 10.06 23.77 11.22 33.84 2.59 .93-.8 1.8-1.67 2.59-2.6l139.78-163.12c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62Z"></path>
162 |                         </svg>
163 |                     </span>
164 |                 </div>
165 |                 <div class="mt-1  text-gray-500 text-sm ">
166 |                     <select class="w-full bg-gray-200 py-1.5 px-2 outline-none text-gray-600 rounded" id name>
167 |                         <option value="">Contains</option>
168 |                         <option value="">Begins with</option>
169 |                     </select>
170 |                     <input class="w-full bg-gray-200 py-1.5 px-2 outline-none text-gray-600 rounded mt-2" type="text" placeholder="Add Email">
171 |                 </div>
172 |             </div>
173 | 
174 |             <!-- First Name Section -->
175 |             <div class="border-b mt-5 pb-3">
176 |                 <div class="text-gray-700  flex items-center justify-between mb-3">
177 |                     <span>First Name</span>
178 |                     <span>
179 |                         <svg class="w-3.5 h-3.5 fill-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
180 |                             <path d="M98 190.06l139.78 163.12h-.001c8.62 10.06 23.77 11.22 33.84 2.59 .93-.8 1.8-1.67 2.59-2.6l139.78-163.12c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62Z"></path>
181 |                         </svg>
182 |                     </span>
183 |                 </div>
184 |                 <div class="mt-1  text-xs text-gray-500">
185 |                     <div class="bg-gray-200 rounded-full px-1.5 py-1 items-center space-x-1 inline-flex">
186 |                         <span class="text-xxs">Starts with: </span>
187 |                         <span class="text-gray-600">Emy</span>
188 |                         <span>
189 |                             <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
190 |                                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
191 |                             </svg>
192 |                         </span>
193 |                     </div>
194 |                 </div>
195 |             </div>
196 | 
197 |             <!-- Last Name Section -->
198 |             <div class="border-b mt-5 pb-3">
199 |                 <div class="text-gray-700 flex items-center justify-between mb-3">
200 |                     <span>Last Name</span>
201 |                     <span>
202 |                         <svg class="w-3.5 h-3.5 fill-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
203 |                             <path d="M98 190.06l139.78 163.12h-.001c8.62 10.06 23.77 11.22 33.84 2.59 .93-.8 1.8-1.67 2.59-2.6l139.78-163.12c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62Z"></path>
204 |                         </svg>
205 |                     </span>
206 |                 </div>
207 |                 <div class="mt-1 text-xs text-gray-500">
208 |                     <div class="bg-gray-200 rounded-full px-1.5 py-1 items-center space-x-1 inline-flex">
209 |                         <span class="text-xxs">Starts with: </span>
210 |                         <span class="text-gray-600">Jackson</span>
211 |                         <span>
212 |                             <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
213 |                                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
214 |                             </svg>
215 |                         </span>
216 |                     </div>
217 |                 </div>
218 |             </div>
219 | 
220 |             <!-- Created Section -->
221 |             <div class="border-b mt-5 pb-3">
222 |                 <div class="text-gray-700 flex items-center justify-between mb-3">
223 |                     <span>Creation Time</span>
224 |                     <span>
225 |                         <svg class="w-3.5 h-3.5 fill-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
226 |                             <path d="M98 190.06l139.78 163.12h-.001c8.62 10.06 23.77 11.22 33.84 2.59 .93-.8 1.8-1.67 2.59-2.6l139.78-163.12c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62Z"></path>
227 |                         </svg>
228 |                     </span>
229 |                 </div>
230 |                 <div class="mt-1 text-xs text-gray-500">
231 |                     <div class="bg-gray-200 rounded-full px-1.5 py-1 items-center space-x-1 inline-flex">
232 |                         <span class="text-xxs">Before: </span>
233 |                         <span class="text-gray-600">2019-06-01</span>
234 |                         <span>
235 |                             <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
236 |                                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
237 |                             </svg>
238 |                         </span>
239 |                     </div>
240 |                 </div>
241 |             </div>
242 | 
243 |             <!-- ClientID Section -->
244 |             <div class="border-b mt-5 pb-3">
245 |                 <div class="text-gray-700 flex items-center justify-between mb-3">
246 |                     <span>Client ID</span>
247 |                     <span>
248 |                         <svg class="w-3.5 h-3.5 fill-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
249 |                             <path d="M414 321.94L274.22 158.82v0c-8.63-10.07-23.78-11.23-33.85-2.6 -.94.79-1.81 1.66-2.6 2.59L97.99 321.93c-13.34 15.57-2.28 39.62 18.22 39.62h279.6c20.5 0 31.56-24.05 18.18-39.62Z"></path>
250 |                         </svg>
251 |                     </span>
252 |                 </div>
253 |                 <div class="mt-1 text-xs text-gray-500 hidden">
254 |                     <div class="bg-gray-200 rounded-full px-1.5 py-1 items-center space-x-1 inline-flex">
255 |                         <span class="text-xxs">Before: </span>
256 |                         <span class="text-gray-600">2019-06-01</span>
257 |                         <span>
258 |                             <svg class="w-3.5 h-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
259 |                                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
260 |                             </svg>
261 |                         </span>
262 |                     </div>
263 |                 </div>
264 |             </div>
265 | 
266 |             <!-- Verification Section -->
267 |             <div class="border-b mt-5 pb-3">
268 |                 <div class="text-gray-700 flex items-center justify-between mb-3">
269 |                     <span>Verification</span>
270 |                     <span>
271 |                         <svg class="w-3.5 h-3.5 fill-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
272 |                             <path d="M98 190.06l139.78 163.12h-.001c8.62 10.06 23.77 11.22 33.84 2.59 .93-.8 1.8-1.67 2.59-2.6l139.78-163.12c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62Z"></path>
273 |                         </svg>
274 |                     </span>
275 |                 </div>
276 |                 <div class="mt-1 text-xs text-gray-500 space-y-3">
277 |                     <span class="flex items-center space-x-2">
278 |                         <input class="accent-primary w-4 h-4" type="checkbox" checked>
279 |                         <label>Verified</label>
280 |                     </span>
281 |                     <span class="flex items-center space-x-2">
282 |                         <input class="accent-primary w-4 h-4" type="checkbox">
283 |                         <label>Not Verified</label>
284 |                     </span>
285 | 
286 |                 </div>
287 |             </div>
288 | 
289 |             <!-- Apply Button Section -->
290 |             <div class="mt-8 flex items-start justify-between space-x-3">
291 |                 <button class="bg-primary border border-primary font-medium text-sm w-2/3 text-white tracking-wide py-2 rounded-md hover:bg-primary/90">Apply</button>
292 |                 <button class="border border-gray-300 font-medium text-sm w-1/3 text-gray-500 tracking-wide py-2 rounded-md hover:border-gray-400">Reset</button>
293 |             </div>
294 | 
295 |         </aside>
296 | 
297 |         <!-- Clients Main-->
298 |         <section class="flex-1 py-6 px-4 md:px-4 lg:px-8">
299 | 
300 |             <!-- Header -->
301 |             <div class="flex items-center justify-between">
302 |                 <span class="text-gray-900  text-xl font-semibold">Clients</span>
303 |                 <div class="flex items-center space-x-4 ">
304 |                     <button class="bg-gray-200 p-2 text-gray-600 rounded hover:bg-gray-300">
305 |                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
306 |                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859M12 3v8.25m0 0l-3-3m3 3l3-3" />
307 |                           </svg>                                                   
308 |                     </button>
309 |                     <button class="bg-primary hover:bg-primary/90 py-1.5 px-4 rounded flex items-center text-white space-x-1">
310 |                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
311 |                             <path fill-rule="evenodd" d="M12 5.25a.75.75 0 01.75.75v5.25H18a.75.75 0 010 1.5h-5.25V18a.75.75 0 01-1.5 0v-5.25H6a.75.75 0 010-1.5h5.25V6a.75.75 0 01.75-.75z" clip-rule="evenodd" />
312 |                           </svg>                          
313 |                           <span>Add Client</span>
314 |                     </button>
315 |                     <!-- Menu button on small screen -->
316 |                     <button class="lg:hidden bg-gray-50 p-2 text-gray-600 rounded hover:bg-gray-300 focus:text-primary outline-none focus:drop-shadow" @click="showMenu = !showMenu">
317 |                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
318 |                             <path fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm7 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z" clip-rule="evenodd" />
319 |                           </svg>                                                   
320 |                     </button>
321 |                 </div>
322 |             </div>
323 | 
324 |             <!-- Navigation View -->
325 |             <nav class="flex items-center mt-8 border-b space-x-10 text-gray-400 font-medium">
326 |                 <a href="#" class="flex items-center space-x-1 text-gray-600 border-b-2 border-b-primary pb-3">
327 |                     <span>
328 |                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
329 |                             <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122" />
330 |                         </svg>                  
331 |                     </span>
332 |                     <span>Overview</span>
333 |                 </a>
334 |                 <a href="#" class="flex items-center space-x-1 pb-3 border-b-2 border-transparent hover:border-b-primary hover:text-gray-600">
335 |                     <span>
336 |                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
337 |                             <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z" />
338 |                             </svg>                   
339 |                     </span>
340 |                     <span>List View</span>
341 |                 </a>
342 |                 <a href="#" class="flex items-center space-x-1 pb-3 border-b-2 border-transparent hover:border-b-primary hover:text-gray-600">
343 |                     <span>
344 |                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
345 |                             <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
346 |                             </svg>                                                
347 |                     </span>
348 |                     <span>Segment</span>
349 |                 </a>
350 |             </nav>
351 | 
352 |             <div class="mt-8 text-gray-500">
353 |                 <table class="w-full table-auto">
354 |                     <thead class="uppercase tracking-wider border-b h-7 align-top text-xs font-semibold">
355 |                         <tr>
356 |                             <td class="min-w-fit w-3/5 md:w-1/2 lg:w-fit">Client</td>
357 |                             <td class="">Tags</td>
358 |                             <td class="hidden lg:table-cell">Created</td>
359 |                             <td class="hidden xl:table-cell"></td>
360 |                         </tr>
361 |                     </thead>
362 |                     <tbody>
363 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
364 |                             <td class="flex items-center space-x-3 h-16">
365 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/women/47.jpg" alt="" srcset="">
366 |                                 <div class="flex flex-col">
367 |                                     <span class="font-semibold text-sm">Emy Jackson</span>
368 |                                     <span class="text-xs">emy_jack@mclient.com</span>
369 |                                 </div>
370 |                             </td>
371 |                             <td class="text-xs space-y-1.5">
372 |                                 <span class="px-2 py-0.5 inline-block  text-blue-500 bg-blue-50 rounded-full">VIP Client</span>
373 |                                 <span class="px-2 py-0.5 inline-block  text-pink-500 bg-pink-50 rounded-full">Early Adaptor</span>
374 |                             </td>
375 |                             <td class="hidden lg:table-cell">2022-08-27</td>
376 |                             <td class="text-xl hidden xl:table-cell"> > </td>
377 |                         </tr>
378 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
379 |                             <td class="flex items-center space-x-3 h-16">
380 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/men/9.jpg" alt="" srcset="">
381 |                                 <div class="flex flex-col">
382 |                                     <span class="font-semibold text-sm">Martin Hughes</span>
383 |                                     <span class="text-xs">martin.hk@mclient.com</span>
384 |                                 </div>
385 |                             </td>
386 |                             <td class="text-xs space-y-1.5">
387 |                                 <span class="px-2 py-0.5 inline-block  text-blue-500 bg-blue-50 rounded-full">VIP Client</span>
388 |                                 <span class="px-2 py-0.5 inline-block  text-pink-500 bg-pink-50 rounded-full">Early Adaptor</span>
389 |                                 <span class="px-2 py-0.5 inline-block  text-teal-500 bg-teal-50 rounded-full">Sales</span>
390 |                                 <span class="px-2 py-0.5 inline-block text-orange-500 bg-orange-50 rounded-full">Finance</span>
391 |                             </td>
392 |                             <td class="hidden lg:table-cell">2021-01-29</td>
393 |                             <td class="text-xl hidden xl:table-cell"> > </td>
394 |                         </tr>
395 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
396 |                             <td class="flex items-center space-x-3 h-16">
397 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/women/75.jpg" alt="" srcset="">
398 |                                 <div class="flex flex-col">
399 |                                     <span class="font-semibold text-sm">Laura Madison</span>
400 |                                     <span class="text-xs">l.madisonk@mclient.com</span>
401 |                                 </div>
402 |                             </td>
403 |                             <td class="text-xs space-y-1.5">
404 |                                 <span class="px-2 py-0.5 inline-block  text-pink-500 bg-pink-50 rounded-full">Early Adaptor</span>
405 |                                 <span class="px-2 py-0.5 inline-block  text-teal-500 bg-teal-50 rounded-full">Sales</span>
406 |                             </td>
407 |                             <td class="hidden lg:table-cell">2021-01-12</td>
408 |                             <td class="text-xl hidden xl:table-cell"> > </td>
409 |                         </tr>
410 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
411 |                             <td class="flex items-center space-x-3 h-16">
412 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/men/11.jpg" alt="" srcset="">
413 |                                 <div class="flex flex-col">
414 |                                     <span class="font-semibold text-sm">Shoan Stephen</span>
415 |                                     <span class="text-xs">stephen.sh@mclient.com</span>
416 |                                 </div>
417 |                             </td>
418 |                             <td class="text-xs space-y-1.5">
419 |                                 <span class="px-2 py-0.5 inline-block  text-violet-500 bg-violet-50 rounded-full">Manager</span>
420 |                                 <span class="px-2 py-0.5 inline-block  text-blue-500 bg-blue-50 rounded-full">VIP Client</span>
421 |                             </td>
422 |                             <td class="hidden lg:table-cell">2020-02-21</td>
423 |                             <td class="text-xl hidden xl:table-cell"> > </td>
424 |                         </tr>
425 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
426 |                             <td class="flex items-center space-x-3 h-16">
427 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/women/11.jpg" alt="" srcset="">
428 |                                 <div class="flex flex-col">
429 |                                     <span class="font-semibold text-sm">Kate Medona</span>
430 |                                     <span class="text-xs">kate_medona@mclient.com</span>
431 |                                 </div>
432 |                             </td>
433 |                             <td class="text-xs space-y-1.5">
434 |                                 <span class="px-2 py-0.5 inline-block  text-violet-500 bg-violet-50 rounded-full">Manager</span>
435 |                                 <span class="px-2 py-0.5 inline-block  text-orange-500 bg-orange-50 rounded-full">Finance</span>
436 |                             </td>
437 |                             <td class="hidden lg:table-cell">2020-08-23</td>
438 |                             <td class="text-xl hidden xl:table-cell"> > </td>
439 |                         </tr>
440 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
441 |                             <td class="flex items-center space-x-3 h-16">
442 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/men/47.jpg" alt="" srcset="">
443 |                                 <div class="flex flex-col">
444 |                                     <span class="font-semibold text-sm">Paul Benn</span>
445 |                                     <span class="text-xs">p.benn@mclient.com</span>
446 |                                 </div>
447 |                             </td>
448 |                             <td class="text-xs space-y-1.5">
449 |                                 <span class="px-2 py-0.5 inline-block  text-pink-500 bg-pink-50 rounded-full">Early Adaptor</span>
450 |                                 <span class="px-2 py-0.5 inline-block  text-orange-500 bg-orange-50 rounded-full">Finance</span>
451 |                             </td>
452 |                             <td class="hidden lg:table-cell">2019-11-14</td>
453 |                             <td class="text-xl hidden xl:table-cell"> > </td>
454 |                         </tr>
455 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
456 |                             <td class="flex items-center space-x-3 h-16">
457 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/men/34.jpg" alt="" srcset="">
458 |                                 <div class="flex flex-col">
459 |                                     <span class="font-semibold text-sm">Chris Maya</span>
460 |                                     <span class="text-xs">chris.maya@mclient.com</span>
461 |                                 </div>
462 |                             </td>
463 |                             <td class="text-xs space-y-1.5">
464 |                                 <span class="px-2 py-0.5 inline-block  text-blue-500 bg-blue-50 rounded-full">VIP Client</span>
465 |                                 <span class="px-2 py-0.5 inline-block  text-indigo-500 bg-indigo-50 rounded-full">IT</span>
466 |                             </td>
467 |                             <td class="hidden lg:table-cell">2019-10-08</td>
468 |                             <td class="text-xl hidden xl:table-cell"> > </td>
469 |                         </tr>
470 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
471 |                             <td class="flex items-center space-x-3 h-16">
472 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/men/21.jpg" alt="" srcset="">
473 |                                 <div class="flex flex-col">
474 |                                     <span class="font-semibold text-sm">Mike Smith</span>
475 |                                     <span class="text-xs">m.smith@mclient.com</span>
476 |                                 </div>
477 |                             </td>
478 |                             <td class="text-xs space-y-1.5">
479 |                                 <span class="px-2 py-0.5 inline-block  text-orange-500 bg-orange-50 rounded-full">Finance</span>
480 |                             </td>
481 |                             <td class="hidden lg:table-cell">2019-01-04</td>
482 |                             <td class="text-xl hidden xl:table-cell"> > </td>
483 |                         </tr>
484 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
485 |                             <td class="flex items-center space-x-3 h-16">
486 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/men/33.jpg" alt="" srcset="">
487 |                                 <div class="flex flex-col">
488 |                                     <span class="font-semibold text-sm">Alison Owen</span>
489 |                                     <span class="text-xs">alison_owen@mclient.com</span>
490 |                                 </div>
491 |                             </td>
492 |                             <td class="text-xs space-y-1.5">
493 |                                 <span class="px-2 py-0.5 inline-block  text-indigo-500 bg-indigo-50 rounded-full">IT</span>
494 |                                 <span class="px-2 py-0.5 inline-block  text-violet-500 bg-violet-50 rounded-full">Manager</span>
495 |                             </td>
496 |                             <td class="hidden lg:table-cell">2018-10-30</td>
497 |                             <td class="text-xl hidden xl:table-cell"> > </td>
498 |                         </tr>
499 |                         <tr class="h-16 border-b border-gray-100 hover:bg-primary/5">
500 |                             <td class="flex items-center space-x-3 h-16">
501 |                                 <img class="rounded-full h-9 w-9 " src="https://randomuser.me/api/portraits/women/32.jpg" alt="" srcset="">
502 |                                 <div class="flex flex-col">
503 |                                     <span class="font-semibold text-sm">Sara Knight</span>
504 |                                     <span class="text-xs">s.knight@mclient.com</span>
505 |                                 </div>
506 |                             </td>
507 |                             <td class="text-xs space-y-1.5">
508 |                                 <span class="px-2 py-0.5 inline-block  text-pink-500 bg-pink-50 rounded-full">Early Adaptor</span>
509 |                                 <span class="px-2 py-0.5 inline-block  text-teal-500 bg-teal-50 rounded-full">Sales</span>
510 |                             </td>
511 |                             <td class="hidden lg:table-cell">2018-02-18</td>
512 |                             <td class="text-xl hidden xl:table-cell"> > </td>
513 |                         </tr>
514 |                     </tbody>
515 |                     <tfoot>
516 |                         <tr class="h-24">
517 |                             <td colspan="4">
518 |                              <div class="flex items-center justify-between">
519 |                                 <div class="flex items-center text-sm text-gray-400">
520 |                                     <span>Rows per page</span>
521 |                                     <span class="text-gray-500 font-semibold ml-2">10</span>
522 |                                     <span>
523 |                                         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
524 |                                             <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path>
525 |                                         </svg>
526 |                                     </span>
527 |                                     <span class="ml-2">out of</span>
528 |                                     <span class="ml-2">386</span>
529 |                                   </div>
530 |                                   
531 |                                   <div>
532 |                                     <nav class="isolate inline-flex rounded-md items-center space-x-3 text-gray-400" aria-label="Pagination">
533 |                                        <span class="p-0.5 bg-gray-100 rounded">
534 |                                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
535 |                                             <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
536 |                                           </svg>                                          
537 |                                        </span>
538 |                                        <div class="hidden sm:inline-flex items-center space-x-3">
539 |                                             <span class="text-gray-500 font-semibold">1</span>
540 |                                             <span>2</span>
541 |                                             <span>3</span>
542 |                                             <span>...</span>
543 |                                             <span>15</span>
544 |                                             <span>16</span>
545 |                                        </div>
546 |                                        <span class="p-0.5 bg-gray-100 rounded">
547 |                                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
548 |                                             <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
549 |                                           </svg>                                          
550 |                                        </span>
551 |                                     </nav>
552 |                                   </div>
553 |                              </div>
554 |                             </td>
555 |                         </tr>
556 |                     </tfoot>
557 |                 </table>
558 |             </div>
559 |         </section>
560 |     </main>
561 | 
562 | </body>
563 | 
564 | </html>


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "name": "tailwind-client-dashboard",
   3 |   "lockfileVersion": 2,
   4 |   "requires": true,
   5 |   "packages": {
   6 |     "": {
   7 |       "devDependencies": {
   8 |         "tailwindcss": "^3.1.8"
   9 |       }
  10 |     },
  11 |     "node_modules/@nodelib/fs.scandir": {
  12 |       "version": "2.1.5",
  13 |       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
  14 |       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
  15 |       "dev": true,
  16 |       "dependencies": {
  17 |         "@nodelib/fs.stat": "2.0.5",
  18 |         "run-parallel": "^1.1.9"
  19 |       },
  20 |       "engines": {
  21 |         "node": ">= 8"
  22 |       }
  23 |     },
  24 |     "node_modules/@nodelib/fs.stat": {
  25 |       "version": "2.0.5",
  26 |       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
  27 |       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
  28 |       "dev": true,
  29 |       "engines": {
  30 |         "node": ">= 8"
  31 |       }
  32 |     },
  33 |     "node_modules/@nodelib/fs.walk": {
  34 |       "version": "1.2.8",
  35 |       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
  36 |       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
  37 |       "dev": true,
  38 |       "dependencies": {
  39 |         "@nodelib/fs.scandir": "2.1.5",
  40 |         "fastq": "^1.6.0"
  41 |       },
  42 |       "engines": {
  43 |         "node": ">= 8"
  44 |       }
  45 |     },
  46 |     "node_modules/acorn": {
  47 |       "version": "7.4.1",
  48 |       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
  49 |       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
  50 |       "dev": true,
  51 |       "bin": {
  52 |         "acorn": "bin/acorn"
  53 |       },
  54 |       "engines": {
  55 |         "node": ">=0.4.0"
  56 |       }
  57 |     },
  58 |     "node_modules/acorn-node": {
  59 |       "version": "1.8.2",
  60 |       "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
  61 |       "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
  62 |       "dev": true,
  63 |       "dependencies": {
  64 |         "acorn": "^7.0.0",
  65 |         "acorn-walk": "^7.0.0",
  66 |         "xtend": "^4.0.2"
  67 |       }
  68 |     },
  69 |     "node_modules/acorn-walk": {
  70 |       "version": "7.2.0",
  71 |       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
  72 |       "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
  73 |       "dev": true,
  74 |       "engines": {
  75 |         "node": ">=0.4.0"
  76 |       }
  77 |     },
  78 |     "node_modules/anymatch": {
  79 |       "version": "3.1.2",
  80 |       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
  81 |       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
  82 |       "dev": true,
  83 |       "dependencies": {
  84 |         "normalize-path": "^3.0.0",
  85 |         "picomatch": "^2.0.4"
  86 |       },
  87 |       "engines": {
  88 |         "node": ">= 8"
  89 |       }
  90 |     },
  91 |     "node_modules/arg": {
  92 |       "version": "5.0.2",
  93 |       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
  94 |       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
  95 |       "dev": true
  96 |     },
  97 |     "node_modules/binary-extensions": {
  98 |       "version": "2.2.0",
  99 |       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
 100 |       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
 101 |       "dev": true,
 102 |       "engines": {
 103 |         "node": ">=8"
 104 |       }
 105 |     },
 106 |     "node_modules/braces": {
 107 |       "version": "3.0.2",
 108 |       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 109 |       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
 110 |       "dev": true,
 111 |       "dependencies": {
 112 |         "fill-range": "^7.0.1"
 113 |       },
 114 |       "engines": {
 115 |         "node": ">=8"
 116 |       }
 117 |     },
 118 |     "node_modules/camelcase-css": {
 119 |       "version": "2.0.1",
 120 |       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
 121 |       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
 122 |       "dev": true,
 123 |       "engines": {
 124 |         "node": ">= 6"
 125 |       }
 126 |     },
 127 |     "node_modules/chokidar": {
 128 |       "version": "3.5.3",
 129 |       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
 130 |       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
 131 |       "dev": true,
 132 |       "funding": [
 133 |         {
 134 |           "type": "individual",
 135 |           "url": "https://paulmillr.com/funding/"
 136 |         }
 137 |       ],
 138 |       "dependencies": {
 139 |         "anymatch": "~3.1.2",
 140 |         "braces": "~3.0.2",
 141 |         "glob-parent": "~5.1.2",
 142 |         "is-binary-path": "~2.1.0",
 143 |         "is-glob": "~4.0.1",
 144 |         "normalize-path": "~3.0.0",
 145 |         "readdirp": "~3.6.0"
 146 |       },
 147 |       "engines": {
 148 |         "node": ">= 8.10.0"
 149 |       },
 150 |       "optionalDependencies": {
 151 |         "fsevents": "~2.3.2"
 152 |       }
 153 |     },
 154 |     "node_modules/chokidar/node_modules/glob-parent": {
 155 |       "version": "5.1.2",
 156 |       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 157 |       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 158 |       "dev": true,
 159 |       "dependencies": {
 160 |         "is-glob": "^4.0.1"
 161 |       },
 162 |       "engines": {
 163 |         "node": ">= 6"
 164 |       }
 165 |     },
 166 |     "node_modules/color-name": {
 167 |       "version": "1.1.4",
 168 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 169 |       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 170 |       "dev": true
 171 |     },
 172 |     "node_modules/cssesc": {
 173 |       "version": "3.0.0",
 174 |       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 175 |       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 176 |       "dev": true,
 177 |       "bin": {
 178 |         "cssesc": "bin/cssesc"
 179 |       },
 180 |       "engines": {
 181 |         "node": ">=4"
 182 |       }
 183 |     },
 184 |     "node_modules/defined": {
 185 |       "version": "1.0.0",
 186 |       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
 187 |       "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
 188 |       "dev": true
 189 |     },
 190 |     "node_modules/detective": {
 191 |       "version": "5.2.1",
 192 |       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
 193 |       "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
 194 |       "dev": true,
 195 |       "dependencies": {
 196 |         "acorn-node": "^1.8.2",
 197 |         "defined": "^1.0.0",
 198 |         "minimist": "^1.2.6"
 199 |       },
 200 |       "bin": {
 201 |         "detective": "bin/detective.js"
 202 |       },
 203 |       "engines": {
 204 |         "node": ">=0.8.0"
 205 |       }
 206 |     },
 207 |     "node_modules/didyoumean": {
 208 |       "version": "1.2.2",
 209 |       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
 210 |       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
 211 |       "dev": true
 212 |     },
 213 |     "node_modules/dlv": {
 214 |       "version": "1.1.3",
 215 |       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
 216 |       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
 217 |       "dev": true
 218 |     },
 219 |     "node_modules/fast-glob": {
 220 |       "version": "3.2.12",
 221 |       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
 222 |       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
 223 |       "dev": true,
 224 |       "dependencies": {
 225 |         "@nodelib/fs.stat": "^2.0.2",
 226 |         "@nodelib/fs.walk": "^1.2.3",
 227 |         "glob-parent": "^5.1.2",
 228 |         "merge2": "^1.3.0",
 229 |         "micromatch": "^4.0.4"
 230 |       },
 231 |       "engines": {
 232 |         "node": ">=8.6.0"
 233 |       }
 234 |     },
 235 |     "node_modules/fast-glob/node_modules/glob-parent": {
 236 |       "version": "5.1.2",
 237 |       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 238 |       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 239 |       "dev": true,
 240 |       "dependencies": {
 241 |         "is-glob": "^4.0.1"
 242 |       },
 243 |       "engines": {
 244 |         "node": ">= 6"
 245 |       }
 246 |     },
 247 |     "node_modules/fastq": {
 248 |       "version": "1.13.0",
 249 |       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
 250 |       "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
 251 |       "dev": true,
 252 |       "dependencies": {
 253 |         "reusify": "^1.0.4"
 254 |       }
 255 |     },
 256 |     "node_modules/fill-range": {
 257 |       "version": "7.0.1",
 258 |       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 259 |       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
 260 |       "dev": true,
 261 |       "dependencies": {
 262 |         "to-regex-range": "^5.0.1"
 263 |       },
 264 |       "engines": {
 265 |         "node": ">=8"
 266 |       }
 267 |     },
 268 |     "node_modules/fsevents": {
 269 |       "version": "2.3.2",
 270 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 271 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 272 |       "dev": true,
 273 |       "hasInstallScript": true,
 274 |       "optional": true,
 275 |       "os": [
 276 |         "darwin"
 277 |       ],
 278 |       "engines": {
 279 |         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 280 |       }
 281 |     },
 282 |     "node_modules/function-bind": {
 283 |       "version": "1.1.1",
 284 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
 285 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 286 |       "dev": true
 287 |     },
 288 |     "node_modules/glob-parent": {
 289 |       "version": "6.0.2",
 290 |       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
 291 |       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
 292 |       "dev": true,
 293 |       "dependencies": {
 294 |         "is-glob": "^4.0.3"
 295 |       },
 296 |       "engines": {
 297 |         "node": ">=10.13.0"
 298 |       }
 299 |     },
 300 |     "node_modules/has": {
 301 |       "version": "1.0.3",
 302 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 303 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
 304 |       "dev": true,
 305 |       "dependencies": {
 306 |         "function-bind": "^1.1.1"
 307 |       },
 308 |       "engines": {
 309 |         "node": ">= 0.4.0"
 310 |       }
 311 |     },
 312 |     "node_modules/is-binary-path": {
 313 |       "version": "2.1.0",
 314 |       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
 315 |       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
 316 |       "dev": true,
 317 |       "dependencies": {
 318 |         "binary-extensions": "^2.0.0"
 319 |       },
 320 |       "engines": {
 321 |         "node": ">=8"
 322 |       }
 323 |     },
 324 |     "node_modules/is-core-module": {
 325 |       "version": "2.10.0",
 326 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
 327 |       "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
 328 |       "dev": true,
 329 |       "dependencies": {
 330 |         "has": "^1.0.3"
 331 |       },
 332 |       "funding": {
 333 |         "url": "https://github.com/sponsors/ljharb"
 334 |       }
 335 |     },
 336 |     "node_modules/is-extglob": {
 337 |       "version": "2.1.1",
 338 |       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 339 |       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
 340 |       "dev": true,
 341 |       "engines": {
 342 |         "node": ">=0.10.0"
 343 |       }
 344 |     },
 345 |     "node_modules/is-glob": {
 346 |       "version": "4.0.3",
 347 |       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
 348 |       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
 349 |       "dev": true,
 350 |       "dependencies": {
 351 |         "is-extglob": "^2.1.1"
 352 |       },
 353 |       "engines": {
 354 |         "node": ">=0.10.0"
 355 |       }
 356 |     },
 357 |     "node_modules/is-number": {
 358 |       "version": "7.0.0",
 359 |       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
 360 |       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
 361 |       "dev": true,
 362 |       "engines": {
 363 |         "node": ">=0.12.0"
 364 |       }
 365 |     },
 366 |     "node_modules/lilconfig": {
 367 |       "version": "2.0.6",
 368 |       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
 369 |       "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
 370 |       "dev": true,
 371 |       "engines": {
 372 |         "node": ">=10"
 373 |       }
 374 |     },
 375 |     "node_modules/merge2": {
 376 |       "version": "1.4.1",
 377 |       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
 378 |       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
 379 |       "dev": true,
 380 |       "engines": {
 381 |         "node": ">= 8"
 382 |       }
 383 |     },
 384 |     "node_modules/micromatch": {
 385 |       "version": "4.0.5",
 386 |       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
 387 |       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
 388 |       "dev": true,
 389 |       "dependencies": {
 390 |         "braces": "^3.0.2",
 391 |         "picomatch": "^2.3.1"
 392 |       },
 393 |       "engines": {
 394 |         "node": ">=8.6"
 395 |       }
 396 |     },
 397 |     "node_modules/minimist": {
 398 |       "version": "1.2.6",
 399 |       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
 400 |       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
 401 |       "dev": true
 402 |     },
 403 |     "node_modules/nanoid": {
 404 |       "version": "3.3.4",
 405 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
 406 |       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
 407 |       "dev": true,
 408 |       "bin": {
 409 |         "nanoid": "bin/nanoid.cjs"
 410 |       },
 411 |       "engines": {
 412 |         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 413 |       }
 414 |     },
 415 |     "node_modules/normalize-path": {
 416 |       "version": "3.0.0",
 417 |       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
 418 |       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
 419 |       "dev": true,
 420 |       "engines": {
 421 |         "node": ">=0.10.0"
 422 |       }
 423 |     },
 424 |     "node_modules/object-hash": {
 425 |       "version": "3.0.0",
 426 |       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
 427 |       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
 428 |       "dev": true,
 429 |       "engines": {
 430 |         "node": ">= 6"
 431 |       }
 432 |     },
 433 |     "node_modules/path-parse": {
 434 |       "version": "1.0.7",
 435 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
 436 |       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
 437 |       "dev": true
 438 |     },
 439 |     "node_modules/picocolors": {
 440 |       "version": "1.0.0",
 441 |       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
 442 |       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
 443 |       "dev": true
 444 |     },
 445 |     "node_modules/picomatch": {
 446 |       "version": "2.3.1",
 447 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 448 |       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
 449 |       "dev": true,
 450 |       "engines": {
 451 |         "node": ">=8.6"
 452 |       },
 453 |       "funding": {
 454 |         "url": "https://github.com/sponsors/jonschlinkert"
 455 |       }
 456 |     },
 457 |     "node_modules/pify": {
 458 |       "version": "2.3.0",
 459 |       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
 460 |       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
 461 |       "dev": true,
 462 |       "engines": {
 463 |         "node": ">=0.10.0"
 464 |       }
 465 |     },
 466 |     "node_modules/postcss": {
 467 |       "version": "8.4.16",
 468 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
 469 |       "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
 470 |       "dev": true,
 471 |       "funding": [
 472 |         {
 473 |           "type": "opencollective",
 474 |           "url": "https://opencollective.com/postcss/"
 475 |         },
 476 |         {
 477 |           "type": "tidelift",
 478 |           "url": "https://tidelift.com/funding/github/npm/postcss"
 479 |         }
 480 |       ],
 481 |       "dependencies": {
 482 |         "nanoid": "^3.3.4",
 483 |         "picocolors": "^1.0.0",
 484 |         "source-map-js": "^1.0.2"
 485 |       },
 486 |       "engines": {
 487 |         "node": "^10 || ^12 || >=14"
 488 |       }
 489 |     },
 490 |     "node_modules/postcss-import": {
 491 |       "version": "14.1.0",
 492 |       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
 493 |       "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
 494 |       "dev": true,
 495 |       "dependencies": {
 496 |         "postcss-value-parser": "^4.0.0",
 497 |         "read-cache": "^1.0.0",
 498 |         "resolve": "^1.1.7"
 499 |       },
 500 |       "engines": {
 501 |         "node": ">=10.0.0"
 502 |       },
 503 |       "peerDependencies": {
 504 |         "postcss": "^8.0.0"
 505 |       }
 506 |     },
 507 |     "node_modules/postcss-js": {
 508 |       "version": "4.0.0",
 509 |       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
 510 |       "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
 511 |       "dev": true,
 512 |       "dependencies": {
 513 |         "camelcase-css": "^2.0.1"
 514 |       },
 515 |       "engines": {
 516 |         "node": "^12 || ^14 || >= 16"
 517 |       },
 518 |       "funding": {
 519 |         "type": "opencollective",
 520 |         "url": "https://opencollective.com/postcss/"
 521 |       },
 522 |       "peerDependencies": {
 523 |         "postcss": "^8.3.3"
 524 |       }
 525 |     },
 526 |     "node_modules/postcss-load-config": {
 527 |       "version": "3.1.4",
 528 |       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
 529 |       "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
 530 |       "dev": true,
 531 |       "dependencies": {
 532 |         "lilconfig": "^2.0.5",
 533 |         "yaml": "^1.10.2"
 534 |       },
 535 |       "engines": {
 536 |         "node": ">= 10"
 537 |       },
 538 |       "funding": {
 539 |         "type": "opencollective",
 540 |         "url": "https://opencollective.com/postcss/"
 541 |       },
 542 |       "peerDependencies": {
 543 |         "postcss": ">=8.0.9",
 544 |         "ts-node": ">=9.0.0"
 545 |       },
 546 |       "peerDependenciesMeta": {
 547 |         "postcss": {
 548 |           "optional": true
 549 |         },
 550 |         "ts-node": {
 551 |           "optional": true
 552 |         }
 553 |       }
 554 |     },
 555 |     "node_modules/postcss-nested": {
 556 |       "version": "5.0.6",
 557 |       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
 558 |       "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
 559 |       "dev": true,
 560 |       "dependencies": {
 561 |         "postcss-selector-parser": "^6.0.6"
 562 |       },
 563 |       "engines": {
 564 |         "node": ">=12.0"
 565 |       },
 566 |       "funding": {
 567 |         "type": "opencollective",
 568 |         "url": "https://opencollective.com/postcss/"
 569 |       },
 570 |       "peerDependencies": {
 571 |         "postcss": "^8.2.14"
 572 |       }
 573 |     },
 574 |     "node_modules/postcss-selector-parser": {
 575 |       "version": "6.0.10",
 576 |       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
 577 |       "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
 578 |       "dev": true,
 579 |       "dependencies": {
 580 |         "cssesc": "^3.0.0",
 581 |         "util-deprecate": "^1.0.2"
 582 |       },
 583 |       "engines": {
 584 |         "node": ">=4"
 585 |       }
 586 |     },
 587 |     "node_modules/postcss-value-parser": {
 588 |       "version": "4.2.0",
 589 |       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
 590 |       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 591 |       "dev": true
 592 |     },
 593 |     "node_modules/queue-microtask": {
 594 |       "version": "1.2.3",
 595 |       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
 596 |       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
 597 |       "dev": true,
 598 |       "funding": [
 599 |         {
 600 |           "type": "github",
 601 |           "url": "https://github.com/sponsors/feross"
 602 |         },
 603 |         {
 604 |           "type": "patreon",
 605 |           "url": "https://www.patreon.com/feross"
 606 |         },
 607 |         {
 608 |           "type": "consulting",
 609 |           "url": "https://feross.org/support"
 610 |         }
 611 |       ]
 612 |     },
 613 |     "node_modules/quick-lru": {
 614 |       "version": "5.1.1",
 615 |       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
 616 |       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
 617 |       "dev": true,
 618 |       "engines": {
 619 |         "node": ">=10"
 620 |       },
 621 |       "funding": {
 622 |         "url": "https://github.com/sponsors/sindresorhus"
 623 |       }
 624 |     },
 625 |     "node_modules/read-cache": {
 626 |       "version": "1.0.0",
 627 |       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
 628 |       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
 629 |       "dev": true,
 630 |       "dependencies": {
 631 |         "pify": "^2.3.0"
 632 |       }
 633 |     },
 634 |     "node_modules/readdirp": {
 635 |       "version": "3.6.0",
 636 |       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
 637 |       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
 638 |       "dev": true,
 639 |       "dependencies": {
 640 |         "picomatch": "^2.2.1"
 641 |       },
 642 |       "engines": {
 643 |         "node": ">=8.10.0"
 644 |       }
 645 |     },
 646 |     "node_modules/resolve": {
 647 |       "version": "1.22.1",
 648 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
 649 |       "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
 650 |       "dev": true,
 651 |       "dependencies": {
 652 |         "is-core-module": "^2.9.0",
 653 |         "path-parse": "^1.0.7",
 654 |         "supports-preserve-symlinks-flag": "^1.0.0"
 655 |       },
 656 |       "bin": {
 657 |         "resolve": "bin/resolve"
 658 |       },
 659 |       "funding": {
 660 |         "url": "https://github.com/sponsors/ljharb"
 661 |       }
 662 |     },
 663 |     "node_modules/reusify": {
 664 |       "version": "1.0.4",
 665 |       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
 666 |       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
 667 |       "dev": true,
 668 |       "engines": {
 669 |         "iojs": ">=1.0.0",
 670 |         "node": ">=0.10.0"
 671 |       }
 672 |     },
 673 |     "node_modules/run-parallel": {
 674 |       "version": "1.2.0",
 675 |       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
 676 |       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
 677 |       "dev": true,
 678 |       "funding": [
 679 |         {
 680 |           "type": "github",
 681 |           "url": "https://github.com/sponsors/feross"
 682 |         },
 683 |         {
 684 |           "type": "patreon",
 685 |           "url": "https://www.patreon.com/feross"
 686 |         },
 687 |         {
 688 |           "type": "consulting",
 689 |           "url": "https://feross.org/support"
 690 |         }
 691 |       ],
 692 |       "dependencies": {
 693 |         "queue-microtask": "^1.2.2"
 694 |       }
 695 |     },
 696 |     "node_modules/source-map-js": {
 697 |       "version": "1.0.2",
 698 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
 699 |       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
 700 |       "dev": true,
 701 |       "engines": {
 702 |         "node": ">=0.10.0"
 703 |       }
 704 |     },
 705 |     "node_modules/supports-preserve-symlinks-flag": {
 706 |       "version": "1.0.0",
 707 |       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
 708 |       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
 709 |       "dev": true,
 710 |       "engines": {
 711 |         "node": ">= 0.4"
 712 |       },
 713 |       "funding": {
 714 |         "url": "https://github.com/sponsors/ljharb"
 715 |       }
 716 |     },
 717 |     "node_modules/tailwindcss": {
 718 |       "version": "3.1.8",
 719 |       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
 720 |       "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
 721 |       "dev": true,
 722 |       "dependencies": {
 723 |         "arg": "^5.0.2",
 724 |         "chokidar": "^3.5.3",
 725 |         "color-name": "^1.1.4",
 726 |         "detective": "^5.2.1",
 727 |         "didyoumean": "^1.2.2",
 728 |         "dlv": "^1.1.3",
 729 |         "fast-glob": "^3.2.11",
 730 |         "glob-parent": "^6.0.2",
 731 |         "is-glob": "^4.0.3",
 732 |         "lilconfig": "^2.0.6",
 733 |         "normalize-path": "^3.0.0",
 734 |         "object-hash": "^3.0.0",
 735 |         "picocolors": "^1.0.0",
 736 |         "postcss": "^8.4.14",
 737 |         "postcss-import": "^14.1.0",
 738 |         "postcss-js": "^4.0.0",
 739 |         "postcss-load-config": "^3.1.4",
 740 |         "postcss-nested": "5.0.6",
 741 |         "postcss-selector-parser": "^6.0.10",
 742 |         "postcss-value-parser": "^4.2.0",
 743 |         "quick-lru": "^5.1.1",
 744 |         "resolve": "^1.22.1"
 745 |       },
 746 |       "bin": {
 747 |         "tailwind": "lib/cli.js",
 748 |         "tailwindcss": "lib/cli.js"
 749 |       },
 750 |       "engines": {
 751 |         "node": ">=12.13.0"
 752 |       },
 753 |       "peerDependencies": {
 754 |         "postcss": "^8.0.9"
 755 |       }
 756 |     },
 757 |     "node_modules/to-regex-range": {
 758 |       "version": "5.0.1",
 759 |       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
 760 |       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
 761 |       "dev": true,
 762 |       "dependencies": {
 763 |         "is-number": "^7.0.0"
 764 |       },
 765 |       "engines": {
 766 |         "node": ">=8.0"
 767 |       }
 768 |     },
 769 |     "node_modules/util-deprecate": {
 770 |       "version": "1.0.2",
 771 |       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 772 |       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 773 |       "dev": true
 774 |     },
 775 |     "node_modules/xtend": {
 776 |       "version": "4.0.2",
 777 |       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
 778 |       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
 779 |       "dev": true,
 780 |       "engines": {
 781 |         "node": ">=0.4"
 782 |       }
 783 |     },
 784 |     "node_modules/yaml": {
 785 |       "version": "1.10.2",
 786 |       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
 787 |       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
 788 |       "dev": true,
 789 |       "engines": {
 790 |         "node": ">= 6"
 791 |       }
 792 |     }
 793 |   },
 794 |   "dependencies": {
 795 |     "@nodelib/fs.scandir": {
 796 |       "version": "2.1.5",
 797 |       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
 798 |       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
 799 |       "dev": true,
 800 |       "requires": {
 801 |         "@nodelib/fs.stat": "2.0.5",
 802 |         "run-parallel": "^1.1.9"
 803 |       }
 804 |     },
 805 |     "@nodelib/fs.stat": {
 806 |       "version": "2.0.5",
 807 |       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
 808 |       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
 809 |       "dev": true
 810 |     },
 811 |     "@nodelib/fs.walk": {
 812 |       "version": "1.2.8",
 813 |       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
 814 |       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
 815 |       "dev": true,
 816 |       "requires": {
 817 |         "@nodelib/fs.scandir": "2.1.5",
 818 |         "fastq": "^1.6.0"
 819 |       }
 820 |     },
 821 |     "acorn": {
 822 |       "version": "7.4.1",
 823 |       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
 824 |       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
 825 |       "dev": true
 826 |     },
 827 |     "acorn-node": {
 828 |       "version": "1.8.2",
 829 |       "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
 830 |       "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
 831 |       "dev": true,
 832 |       "requires": {
 833 |         "acorn": "^7.0.0",
 834 |         "acorn-walk": "^7.0.0",
 835 |         "xtend": "^4.0.2"
 836 |       }
 837 |     },
 838 |     "acorn-walk": {
 839 |       "version": "7.2.0",
 840 |       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
 841 |       "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
 842 |       "dev": true
 843 |     },
 844 |     "anymatch": {
 845 |       "version": "3.1.2",
 846 |       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
 847 |       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
 848 |       "dev": true,
 849 |       "requires": {
 850 |         "normalize-path": "^3.0.0",
 851 |         "picomatch": "^2.0.4"
 852 |       }
 853 |     },
 854 |     "arg": {
 855 |       "version": "5.0.2",
 856 |       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
 857 |       "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
 858 |       "dev": true
 859 |     },
 860 |     "binary-extensions": {
 861 |       "version": "2.2.0",
 862 |       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
 863 |       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
 864 |       "dev": true
 865 |     },
 866 |     "braces": {
 867 |       "version": "3.0.2",
 868 |       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
 869 |       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
 870 |       "dev": true,
 871 |       "requires": {
 872 |         "fill-range": "^7.0.1"
 873 |       }
 874 |     },
 875 |     "camelcase-css": {
 876 |       "version": "2.0.1",
 877 |       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
 878 |       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
 879 |       "dev": true
 880 |     },
 881 |     "chokidar": {
 882 |       "version": "3.5.3",
 883 |       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
 884 |       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
 885 |       "dev": true,
 886 |       "requires": {
 887 |         "anymatch": "~3.1.2",
 888 |         "braces": "~3.0.2",
 889 |         "fsevents": "~2.3.2",
 890 |         "glob-parent": "~5.1.2",
 891 |         "is-binary-path": "~2.1.0",
 892 |         "is-glob": "~4.0.1",
 893 |         "normalize-path": "~3.0.0",
 894 |         "readdirp": "~3.6.0"
 895 |       },
 896 |       "dependencies": {
 897 |         "glob-parent": {
 898 |           "version": "5.1.2",
 899 |           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 900 |           "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 901 |           "dev": true,
 902 |           "requires": {
 903 |             "is-glob": "^4.0.1"
 904 |           }
 905 |         }
 906 |       }
 907 |     },
 908 |     "color-name": {
 909 |       "version": "1.1.4",
 910 |       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 911 |       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
 912 |       "dev": true
 913 |     },
 914 |     "cssesc": {
 915 |       "version": "3.0.0",
 916 |       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 917 |       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
 918 |       "dev": true
 919 |     },
 920 |     "defined": {
 921 |       "version": "1.0.0",
 922 |       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
 923 |       "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
 924 |       "dev": true
 925 |     },
 926 |     "detective": {
 927 |       "version": "5.2.1",
 928 |       "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
 929 |       "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
 930 |       "dev": true,
 931 |       "requires": {
 932 |         "acorn-node": "^1.8.2",
 933 |         "defined": "^1.0.0",
 934 |         "minimist": "^1.2.6"
 935 |       }
 936 |     },
 937 |     "didyoumean": {
 938 |       "version": "1.2.2",
 939 |       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
 940 |       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
 941 |       "dev": true
 942 |     },
 943 |     "dlv": {
 944 |       "version": "1.1.3",
 945 |       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
 946 |       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
 947 |       "dev": true
 948 |     },
 949 |     "fast-glob": {
 950 |       "version": "3.2.12",
 951 |       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
 952 |       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
 953 |       "dev": true,
 954 |       "requires": {
 955 |         "@nodelib/fs.stat": "^2.0.2",
 956 |         "@nodelib/fs.walk": "^1.2.3",
 957 |         "glob-parent": "^5.1.2",
 958 |         "merge2": "^1.3.0",
 959 |         "micromatch": "^4.0.4"
 960 |       },
 961 |       "dependencies": {
 962 |         "glob-parent": {
 963 |           "version": "5.1.2",
 964 |           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
 965 |           "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
 966 |           "dev": true,
 967 |           "requires": {
 968 |             "is-glob": "^4.0.1"
 969 |           }
 970 |         }
 971 |       }
 972 |     },
 973 |     "fastq": {
 974 |       "version": "1.13.0",
 975 |       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
 976 |       "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
 977 |       "dev": true,
 978 |       "requires": {
 979 |         "reusify": "^1.0.4"
 980 |       }
 981 |     },
 982 |     "fill-range": {
 983 |       "version": "7.0.1",
 984 |       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
 985 |       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
 986 |       "dev": true,
 987 |       "requires": {
 988 |         "to-regex-range": "^5.0.1"
 989 |       }
 990 |     },
 991 |     "fsevents": {
 992 |       "version": "2.3.2",
 993 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 994 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 995 |       "dev": true,
 996 |       "optional": true
 997 |     },
 998 |     "function-bind": {
 999 |       "version": "1.1.1",
1000 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
1001 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
1002 |       "dev": true
1003 |     },
1004 |     "glob-parent": {
1005 |       "version": "6.0.2",
1006 |       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
1007 |       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
1008 |       "dev": true,
1009 |       "requires": {
1010 |         "is-glob": "^4.0.3"
1011 |       }
1012 |     },
1013 |     "has": {
1014 |       "version": "1.0.3",
1015 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
1016 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
1017 |       "dev": true,
1018 |       "requires": {
1019 |         "function-bind": "^1.1.1"
1020 |       }
1021 |     },
1022 |     "is-binary-path": {
1023 |       "version": "2.1.0",
1024 |       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
1025 |       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
1026 |       "dev": true,
1027 |       "requires": {
1028 |         "binary-extensions": "^2.0.0"
1029 |       }
1030 |     },
1031 |     "is-core-module": {
1032 |       "version": "2.10.0",
1033 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
1034 |       "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
1035 |       "dev": true,
1036 |       "requires": {
1037 |         "has": "^1.0.3"
1038 |       }
1039 |     },
1040 |     "is-extglob": {
1041 |       "version": "2.1.1",
1042 |       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
1043 |       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
1044 |       "dev": true
1045 |     },
1046 |     "is-glob": {
1047 |       "version": "4.0.3",
1048 |       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
1049 |       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
1050 |       "dev": true,
1051 |       "requires": {
1052 |         "is-extglob": "^2.1.1"
1053 |       }
1054 |     },
1055 |     "is-number": {
1056 |       "version": "7.0.0",
1057 |       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
1058 |       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
1059 |       "dev": true
1060 |     },
1061 |     "lilconfig": {
1062 |       "version": "2.0.6",
1063 |       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
1064 |       "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
1065 |       "dev": true
1066 |     },
1067 |     "merge2": {
1068 |       "version": "1.4.1",
1069 |       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
1070 |       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
1071 |       "dev": true
1072 |     },
1073 |     "micromatch": {
1074 |       "version": "4.0.5",
1075 |       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
1076 |       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
1077 |       "dev": true,
1078 |       "requires": {
1079 |         "braces": "^3.0.2",
1080 |         "picomatch": "^2.3.1"
1081 |       }
1082 |     },
1083 |     "minimist": {
1084 |       "version": "1.2.6",
1085 |       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
1086 |       "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
1087 |       "dev": true
1088 |     },
1089 |     "nanoid": {
1090 |       "version": "3.3.4",
1091 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
1092 |       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
1093 |       "dev": true
1094 |     },
1095 |     "normalize-path": {
1096 |       "version": "3.0.0",
1097 |       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
1098 |       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
1099 |       "dev": true
1100 |     },
1101 |     "object-hash": {
1102 |       "version": "3.0.0",
1103 |       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
1104 |       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
1105 |       "dev": true
1106 |     },
1107 |     "path-parse": {
1108 |       "version": "1.0.7",
1109 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
1110 |       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
1111 |       "dev": true
1112 |     },
1113 |     "picocolors": {
1114 |       "version": "1.0.0",
1115 |       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
1116 |       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
1117 |       "dev": true
1118 |     },
1119 |     "picomatch": {
1120 |       "version": "2.3.1",
1121 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
1122 |       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
1123 |       "dev": true
1124 |     },
1125 |     "pify": {
1126 |       "version": "2.3.0",
1127 |       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
1128 |       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
1129 |       "dev": true
1130 |     },
1131 |     "postcss": {
1132 |       "version": "8.4.16",
1133 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
1134 |       "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
1135 |       "dev": true,
1136 |       "requires": {
1137 |         "nanoid": "^3.3.4",
1138 |         "picocolors": "^1.0.0",
1139 |         "source-map-js": "^1.0.2"
1140 |       }
1141 |     },
1142 |     "postcss-import": {
1143 |       "version": "14.1.0",
1144 |       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
1145 |       "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
1146 |       "dev": true,
1147 |       "requires": {
1148 |         "postcss-value-parser": "^4.0.0",
1149 |         "read-cache": "^1.0.0",
1150 |         "resolve": "^1.1.7"
1151 |       }
1152 |     },
1153 |     "postcss-js": {
1154 |       "version": "4.0.0",
1155 |       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
1156 |       "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
1157 |       "dev": true,
1158 |       "requires": {
1159 |         "camelcase-css": "^2.0.1"
1160 |       }
1161 |     },
1162 |     "postcss-load-config": {
1163 |       "version": "3.1.4",
1164 |       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
1165 |       "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
1166 |       "dev": true,
1167 |       "requires": {
1168 |         "lilconfig": "^2.0.5",
1169 |         "yaml": "^1.10.2"
1170 |       }
1171 |     },
1172 |     "postcss-nested": {
1173 |       "version": "5.0.6",
1174 |       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
1175 |       "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
1176 |       "dev": true,
1177 |       "requires": {
1178 |         "postcss-selector-parser": "^6.0.6"
1179 |       }
1180 |     },
1181 |     "postcss-selector-parser": {
1182 |       "version": "6.0.10",
1183 |       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
1184 |       "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
1185 |       "dev": true,
1186 |       "requires": {
1187 |         "cssesc": "^3.0.0",
1188 |         "util-deprecate": "^1.0.2"
1189 |       }
1190 |     },
1191 |     "postcss-value-parser": {
1192 |       "version": "4.2.0",
1193 |       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
1194 |       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
1195 |       "dev": true
1196 |     },
1197 |     "queue-microtask": {
1198 |       "version": "1.2.3",
1199 |       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
1200 |       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
1201 |       "dev": true
1202 |     },
1203 |     "quick-lru": {
1204 |       "version": "5.1.1",
1205 |       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
1206 |       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
1207 |       "dev": true
1208 |     },
1209 |     "read-cache": {
1210 |       "version": "1.0.0",
1211 |       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
1212 |       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
1213 |       "dev": true,
1214 |       "requires": {
1215 |         "pify": "^2.3.0"
1216 |       }
1217 |     },
1218 |     "readdirp": {
1219 |       "version": "3.6.0",
1220 |       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
1221 |       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
1222 |       "dev": true,
1223 |       "requires": {
1224 |         "picomatch": "^2.2.1"
1225 |       }
1226 |     },
1227 |     "resolve": {
1228 |       "version": "1.22.1",
1229 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
1230 |       "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
1231 |       "dev": true,
1232 |       "requires": {
1233 |         "is-core-module": "^2.9.0",
1234 |         "path-parse": "^1.0.7",
1235 |         "supports-preserve-symlinks-flag": "^1.0.0"
1236 |       }
1237 |     },
1238 |     "reusify": {
1239 |       "version": "1.0.4",
1240 |       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
1241 |       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
1242 |       "dev": true
1243 |     },
1244 |     "run-parallel": {
1245 |       "version": "1.2.0",
1246 |       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
1247 |       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
1248 |       "dev": true,
1249 |       "requires": {
1250 |         "queue-microtask": "^1.2.2"
1251 |       }
1252 |     },
1253 |     "source-map-js": {
1254 |       "version": "1.0.2",
1255 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
1256 |       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
1257 |       "dev": true
1258 |     },
1259 |     "supports-preserve-symlinks-flag": {
1260 |       "version": "1.0.0",
1261 |       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
1262 |       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
1263 |       "dev": true
1264 |     },
1265 |     "tailwindcss": {
1266 |       "version": "3.1.8",
1267 |       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
1268 |       "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
1269 |       "dev": true,
1270 |       "requires": {
1271 |         "arg": "^5.0.2",
1272 |         "chokidar": "^3.5.3",
1273 |         "color-name": "^1.1.4",
1274 |         "detective": "^5.2.1",
1275 |         "didyoumean": "^1.2.2",
1276 |         "dlv": "^1.1.3",
1277 |         "fast-glob": "^3.2.11",
1278 |         "glob-parent": "^6.0.2",
1279 |         "is-glob": "^4.0.3",
1280 |         "lilconfig": "^2.0.6",
1281 |         "normalize-path": "^3.0.0",
1282 |         "object-hash": "^3.0.0",
1283 |         "picocolors": "^1.0.0",
1284 |         "postcss": "^8.4.14",
1285 |         "postcss-import": "^14.1.0",
1286 |         "postcss-js": "^4.0.0",
1287 |         "postcss-load-config": "^3.1.4",
1288 |         "postcss-nested": "5.0.6",
1289 |         "postcss-selector-parser": "^6.0.10",
1290 |         "postcss-value-parser": "^4.2.0",
1291 |         "quick-lru": "^5.1.1",
1292 |         "resolve": "^1.22.1"
1293 |       }
1294 |     },
1295 |     "to-regex-range": {
1296 |       "version": "5.0.1",
1297 |       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
1298 |       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
1299 |       "dev": true,
1300 |       "requires": {
1301 |         "is-number": "^7.0.0"
1302 |       }
1303 |     },
1304 |     "util-deprecate": {
1305 |       "version": "1.0.2",
1306 |       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
1307 |       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
1308 |       "dev": true
1309 |     },
1310 |     "xtend": {
1311 |       "version": "4.0.2",
1312 |       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
1313 |       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
1314 |       "dev": true
1315 |     },
1316 |     "yaml": {
1317 |       "version": "1.10.2",
1318 |       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
1319 |       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
1320 |       "dev": true
1321 |     }
1322 |   }
1323 | }
1324 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "devDependencies": {
3 |     "tailwindcss": "^3.1.8"
4 |   },
5 |   "scripts": {
6 |     "build": "npx tailwindcss -i ./style/tailwind.css -o ./style/style.css --watch"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mazyar1128/tailwindcss-client-dashboard/a918981ea1dd6a35e62c94ebb8e1691f8eb3cd21/screenshot.jpg


--------------------------------------------------------------------------------
/screenshot1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mazyar1128/tailwindcss-client-dashboard/a918981ea1dd6a35e62c94ebb8e1691f8eb3cd21/screenshot1.jpg


--------------------------------------------------------------------------------
/style/style.css:
--------------------------------------------------------------------------------
   1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
   2 | 
   3 | /* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap'); */
   4 | 
   5 | /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); */
   6 | 
   7 | /* ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com */
   8 | 
   9 | /*
  10 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  11 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
  12 | */
  13 | 
  14 | *,
  15 | ::before,
  16 | ::after {
  17 |   box-sizing: border-box;
  18 |   /* 1 */
  19 |   border-width: 0;
  20 |   /* 2 */
  21 |   border-style: solid;
  22 |   /* 2 */
  23 |   border-color: #e5e7eb;
  24 |   /* 2 */
  25 | }
  26 | 
  27 | ::before,
  28 | ::after {
  29 |   --tw-content: '';
  30 | }
  31 | 
  32 | /*
  33 | 1. Use a consistent sensible line-height in all browsers.
  34 | 2. Prevent adjustments of font size after orientation changes in iOS.
  35 | 3. Use a more readable tab size.
  36 | 4. Use the user's configured `sans` font-family by default.
  37 | */
  38 | 
  39 | html {
  40 |   line-height: 1.5;
  41 |   /* 1 */
  42 |   -webkit-text-size-adjust: 100%;
  43 |   /* 2 */
  44 |   -moz-tab-size: 4;
  45 |   /* 3 */
  46 |   -o-tab-size: 4;
  47 |      tab-size: 4;
  48 |   /* 3 */
  49 |   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  50 |   /* 4 */
  51 | }
  52 | 
  53 | /*
  54 | 1. Remove the margin in all browsers.
  55 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
  56 | */
  57 | 
  58 | body {
  59 |   margin: 0;
  60 |   /* 1 */
  61 |   line-height: inherit;
  62 |   /* 2 */
  63 | }
  64 | 
  65 | /*
  66 | 1. Add the correct height in Firefox.
  67 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  68 | 3. Ensure horizontal rules are visible by default.
  69 | */
  70 | 
  71 | hr {
  72 |   height: 0;
  73 |   /* 1 */
  74 |   color: inherit;
  75 |   /* 2 */
  76 |   border-top-width: 1px;
  77 |   /* 3 */
  78 | }
  79 | 
  80 | /*
  81 | Add the correct text decoration in Chrome, Edge, and Safari.
  82 | */
  83 | 
  84 | abbr:where([title]) {
  85 |   -webkit-text-decoration: underline dotted;
  86 |           text-decoration: underline dotted;
  87 | }
  88 | 
  89 | /*
  90 | Remove the default font size and weight for headings.
  91 | */
  92 | 
  93 | h1,
  94 | h2,
  95 | h3,
  96 | h4,
  97 | h5,
  98 | h6 {
  99 |   font-size: inherit;
 100 |   font-weight: inherit;
 101 | }
 102 | 
 103 | /*
 104 | Reset links to optimize for opt-in styling instead of opt-out.
 105 | */
 106 | 
 107 | a {
 108 |   color: inherit;
 109 |   text-decoration: inherit;
 110 | }
 111 | 
 112 | /*
 113 | Add the correct font weight in Edge and Safari.
 114 | */
 115 | 
 116 | b,
 117 | strong {
 118 |   font-weight: bolder;
 119 | }
 120 | 
 121 | /*
 122 | 1. Use the user's configured `mono` font family by default.
 123 | 2. Correct the odd `em` font sizing in all browsers.
 124 | */
 125 | 
 126 | code,
 127 | kbd,
 128 | samp,
 129 | pre {
 130 |   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 131 |   /* 1 */
 132 |   font-size: 1em;
 133 |   /* 2 */
 134 | }
 135 | 
 136 | /*
 137 | Add the correct font size in all browsers.
 138 | */
 139 | 
 140 | small {
 141 |   font-size: 80%;
 142 | }
 143 | 
 144 | /*
 145 | Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 146 | */
 147 | 
 148 | sub,
 149 | sup {
 150 |   font-size: 75%;
 151 |   line-height: 0;
 152 |   position: relative;
 153 |   vertical-align: baseline;
 154 | }
 155 | 
 156 | sub {
 157 |   bottom: -0.25em;
 158 | }
 159 | 
 160 | sup {
 161 |   top: -0.5em;
 162 | }
 163 | 
 164 | /*
 165 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 166 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 167 | 3. Remove gaps between table borders by default.
 168 | */
 169 | 
 170 | table {
 171 |   text-indent: 0;
 172 |   /* 1 */
 173 |   border-color: inherit;
 174 |   /* 2 */
 175 |   border-collapse: collapse;
 176 |   /* 3 */
 177 | }
 178 | 
 179 | /*
 180 | 1. Change the font styles in all browsers.
 181 | 2. Remove the margin in Firefox and Safari.
 182 | 3. Remove default padding in all browsers.
 183 | */
 184 | 
 185 | button,
 186 | input,
 187 | optgroup,
 188 | select,
 189 | textarea {
 190 |   font-family: inherit;
 191 |   /* 1 */
 192 |   font-size: 100%;
 193 |   /* 1 */
 194 |   font-weight: inherit;
 195 |   /* 1 */
 196 |   line-height: inherit;
 197 |   /* 1 */
 198 |   color: inherit;
 199 |   /* 1 */
 200 |   margin: 0;
 201 |   /* 2 */
 202 |   padding: 0;
 203 |   /* 3 */
 204 | }
 205 | 
 206 | /*
 207 | Remove the inheritance of text transform in Edge and Firefox.
 208 | */
 209 | 
 210 | button,
 211 | select {
 212 |   text-transform: none;
 213 | }
 214 | 
 215 | /*
 216 | 1. Correct the inability to style clickable types in iOS and Safari.
 217 | 2. Remove default button styles.
 218 | */
 219 | 
 220 | button,
 221 | [type='button'],
 222 | [type='reset'],
 223 | [type='submit'] {
 224 |   -webkit-appearance: button;
 225 |   /* 1 */
 226 |   background-color: transparent;
 227 |   /* 2 */
 228 |   background-image: none;
 229 |   /* 2 */
 230 | }
 231 | 
 232 | /*
 233 | Use the modern Firefox focus style for all focusable elements.
 234 | */
 235 | 
 236 | :-moz-focusring {
 237 |   outline: auto;
 238 | }
 239 | 
 240 | /*
 241 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 242 | */
 243 | 
 244 | :-moz-ui-invalid {
 245 |   box-shadow: none;
 246 | }
 247 | 
 248 | /*
 249 | Add the correct vertical alignment in Chrome and Firefox.
 250 | */
 251 | 
 252 | progress {
 253 |   vertical-align: baseline;
 254 | }
 255 | 
 256 | /*
 257 | Correct the cursor style of increment and decrement buttons in Safari.
 258 | */
 259 | 
 260 | ::-webkit-inner-spin-button,
 261 | ::-webkit-outer-spin-button {
 262 |   height: auto;
 263 | }
 264 | 
 265 | /*
 266 | 1. Correct the odd appearance in Chrome and Safari.
 267 | 2. Correct the outline style in Safari.
 268 | */
 269 | 
 270 | [type='search'] {
 271 |   -webkit-appearance: textfield;
 272 |   /* 1 */
 273 |   outline-offset: -2px;
 274 |   /* 2 */
 275 | }
 276 | 
 277 | /*
 278 | Remove the inner padding in Chrome and Safari on macOS.
 279 | */
 280 | 
 281 | ::-webkit-search-decoration {
 282 |   -webkit-appearance: none;
 283 | }
 284 | 
 285 | /*
 286 | 1. Correct the inability to style clickable types in iOS and Safari.
 287 | 2. Change font properties to `inherit` in Safari.
 288 | */
 289 | 
 290 | ::-webkit-file-upload-button {
 291 |   -webkit-appearance: button;
 292 |   /* 1 */
 293 |   font: inherit;
 294 |   /* 2 */
 295 | }
 296 | 
 297 | /*
 298 | Add the correct display in Chrome and Safari.
 299 | */
 300 | 
 301 | summary {
 302 |   display: list-item;
 303 | }
 304 | 
 305 | /*
 306 | Removes the default spacing and border for appropriate elements.
 307 | */
 308 | 
 309 | blockquote,
 310 | dl,
 311 | dd,
 312 | h1,
 313 | h2,
 314 | h3,
 315 | h4,
 316 | h5,
 317 | h6,
 318 | hr,
 319 | figure,
 320 | p,
 321 | pre {
 322 |   margin: 0;
 323 | }
 324 | 
 325 | fieldset {
 326 |   margin: 0;
 327 |   padding: 0;
 328 | }
 329 | 
 330 | legend {
 331 |   padding: 0;
 332 | }
 333 | 
 334 | ol,
 335 | ul,
 336 | menu {
 337 |   list-style: none;
 338 |   margin: 0;
 339 |   padding: 0;
 340 | }
 341 | 
 342 | /*
 343 | Prevent resizing textareas horizontally by default.
 344 | */
 345 | 
 346 | textarea {
 347 |   resize: vertical;
 348 | }
 349 | 
 350 | /*
 351 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 352 | 2. Set the default placeholder color to the user's configured gray 400 color.
 353 | */
 354 | 
 355 | input::-moz-placeholder, textarea::-moz-placeholder {
 356 |   opacity: 1;
 357 |   /* 1 */
 358 |   color: #9ca3af;
 359 |   /* 2 */
 360 | }
 361 | 
 362 | input::placeholder,
 363 | textarea::placeholder {
 364 |   opacity: 1;
 365 |   /* 1 */
 366 |   color: #9ca3af;
 367 |   /* 2 */
 368 | }
 369 | 
 370 | /*
 371 | Set the default cursor for buttons.
 372 | */
 373 | 
 374 | button,
 375 | [role="button"] {
 376 |   cursor: pointer;
 377 | }
 378 | 
 379 | /*
 380 | Make sure disabled buttons don't get the pointer cursor.
 381 | */
 382 | 
 383 | :disabled {
 384 |   cursor: default;
 385 | }
 386 | 
 387 | /*
 388 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 389 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
 390 |    This can trigger a poorly considered lint error in some tools but is included by design.
 391 | */
 392 | 
 393 | img,
 394 | svg,
 395 | video,
 396 | canvas,
 397 | audio,
 398 | iframe,
 399 | embed,
 400 | object {
 401 |   display: block;
 402 |   /* 1 */
 403 |   vertical-align: middle;
 404 |   /* 2 */
 405 | }
 406 | 
 407 | /*
 408 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 409 | */
 410 | 
 411 | img,
 412 | video {
 413 |   max-width: 100%;
 414 |   height: auto;
 415 | }
 416 | 
 417 | *, ::before, ::after{
 418 |   --tw-border-spacing-x: 0;
 419 |   --tw-border-spacing-y: 0;
 420 |   --tw-translate-x: 0;
 421 |   --tw-translate-y: 0;
 422 |   --tw-rotate: 0;
 423 |   --tw-skew-x: 0;
 424 |   --tw-skew-y: 0;
 425 |   --tw-scale-x: 1;
 426 |   --tw-scale-y: 1;
 427 |   --tw-pan-x:  ;
 428 |   --tw-pan-y:  ;
 429 |   --tw-pinch-zoom:  ;
 430 |   --tw-scroll-snap-strictness: proximity;
 431 |   --tw-ordinal:  ;
 432 |   --tw-slashed-zero:  ;
 433 |   --tw-numeric-figure:  ;
 434 |   --tw-numeric-spacing:  ;
 435 |   --tw-numeric-fraction:  ;
 436 |   --tw-ring-inset:  ;
 437 |   --tw-ring-offset-width: 0px;
 438 |   --tw-ring-offset-color: #fff;
 439 |   --tw-ring-color: rgb(59 130 246 / 0.5);
 440 |   --tw-ring-offset-shadow: 0 0 #0000;
 441 |   --tw-ring-shadow: 0 0 #0000;
 442 |   --tw-shadow: 0 0 #0000;
 443 |   --tw-shadow-colored: 0 0 #0000;
 444 |   --tw-blur:  ;
 445 |   --tw-brightness:  ;
 446 |   --tw-contrast:  ;
 447 |   --tw-grayscale:  ;
 448 |   --tw-hue-rotate:  ;
 449 |   --tw-invert:  ;
 450 |   --tw-saturate:  ;
 451 |   --tw-sepia:  ;
 452 |   --tw-drop-shadow:  ;
 453 |   --tw-backdrop-blur:  ;
 454 |   --tw-backdrop-brightness:  ;
 455 |   --tw-backdrop-contrast:  ;
 456 |   --tw-backdrop-grayscale:  ;
 457 |   --tw-backdrop-hue-rotate:  ;
 458 |   --tw-backdrop-invert:  ;
 459 |   --tw-backdrop-opacity:  ;
 460 |   --tw-backdrop-saturate:  ;
 461 |   --tw-backdrop-sepia:  ;
 462 | }
 463 | 
 464 | ::-webkit-backdrop{
 465 |   --tw-border-spacing-x: 0;
 466 |   --tw-border-spacing-y: 0;
 467 |   --tw-translate-x: 0;
 468 |   --tw-translate-y: 0;
 469 |   --tw-rotate: 0;
 470 |   --tw-skew-x: 0;
 471 |   --tw-skew-y: 0;
 472 |   --tw-scale-x: 1;
 473 |   --tw-scale-y: 1;
 474 |   --tw-pan-x:  ;
 475 |   --tw-pan-y:  ;
 476 |   --tw-pinch-zoom:  ;
 477 |   --tw-scroll-snap-strictness: proximity;
 478 |   --tw-ordinal:  ;
 479 |   --tw-slashed-zero:  ;
 480 |   --tw-numeric-figure:  ;
 481 |   --tw-numeric-spacing:  ;
 482 |   --tw-numeric-fraction:  ;
 483 |   --tw-ring-inset:  ;
 484 |   --tw-ring-offset-width: 0px;
 485 |   --tw-ring-offset-color: #fff;
 486 |   --tw-ring-color: rgb(59 130 246 / 0.5);
 487 |   --tw-ring-offset-shadow: 0 0 #0000;
 488 |   --tw-ring-shadow: 0 0 #0000;
 489 |   --tw-shadow: 0 0 #0000;
 490 |   --tw-shadow-colored: 0 0 #0000;
 491 |   --tw-blur:  ;
 492 |   --tw-brightness:  ;
 493 |   --tw-contrast:  ;
 494 |   --tw-grayscale:  ;
 495 |   --tw-hue-rotate:  ;
 496 |   --tw-invert:  ;
 497 |   --tw-saturate:  ;
 498 |   --tw-sepia:  ;
 499 |   --tw-drop-shadow:  ;
 500 |   --tw-backdrop-blur:  ;
 501 |   --tw-backdrop-brightness:  ;
 502 |   --tw-backdrop-contrast:  ;
 503 |   --tw-backdrop-grayscale:  ;
 504 |   --tw-backdrop-hue-rotate:  ;
 505 |   --tw-backdrop-invert:  ;
 506 |   --tw-backdrop-opacity:  ;
 507 |   --tw-backdrop-saturate:  ;
 508 |   --tw-backdrop-sepia:  ;
 509 | }
 510 | 
 511 | ::backdrop{
 512 |   --tw-border-spacing-x: 0;
 513 |   --tw-border-spacing-y: 0;
 514 |   --tw-translate-x: 0;
 515 |   --tw-translate-y: 0;
 516 |   --tw-rotate: 0;
 517 |   --tw-skew-x: 0;
 518 |   --tw-skew-y: 0;
 519 |   --tw-scale-x: 1;
 520 |   --tw-scale-y: 1;
 521 |   --tw-pan-x:  ;
 522 |   --tw-pan-y:  ;
 523 |   --tw-pinch-zoom:  ;
 524 |   --tw-scroll-snap-strictness: proximity;
 525 |   --tw-ordinal:  ;
 526 |   --tw-slashed-zero:  ;
 527 |   --tw-numeric-figure:  ;
 528 |   --tw-numeric-spacing:  ;
 529 |   --tw-numeric-fraction:  ;
 530 |   --tw-ring-inset:  ;
 531 |   --tw-ring-offset-width: 0px;
 532 |   --tw-ring-offset-color: #fff;
 533 |   --tw-ring-color: rgb(59 130 246 / 0.5);
 534 |   --tw-ring-offset-shadow: 0 0 #0000;
 535 |   --tw-ring-shadow: 0 0 #0000;
 536 |   --tw-shadow: 0 0 #0000;
 537 |   --tw-shadow-colored: 0 0 #0000;
 538 |   --tw-blur:  ;
 539 |   --tw-brightness:  ;
 540 |   --tw-contrast:  ;
 541 |   --tw-grayscale:  ;
 542 |   --tw-hue-rotate:  ;
 543 |   --tw-invert:  ;
 544 |   --tw-saturate:  ;
 545 |   --tw-sepia:  ;
 546 |   --tw-drop-shadow:  ;
 547 |   --tw-backdrop-blur:  ;
 548 |   --tw-backdrop-brightness:  ;
 549 |   --tw-backdrop-contrast:  ;
 550 |   --tw-backdrop-grayscale:  ;
 551 |   --tw-backdrop-hue-rotate:  ;
 552 |   --tw-backdrop-invert:  ;
 553 |   --tw-backdrop-opacity:  ;
 554 |   --tw-backdrop-saturate:  ;
 555 |   --tw-backdrop-sepia:  ;
 556 | }
 557 | 
 558 | .fixed{
 559 |   position: fixed;
 560 | }
 561 | 
 562 | .absolute{
 563 |   position: absolute;
 564 | }
 565 | 
 566 | .relative{
 567 |   position: relative;
 568 | }
 569 | 
 570 | .top-0{
 571 |   top: 0px;
 572 | }
 573 | 
 574 | .bottom-0{
 575 |   bottom: 0px;
 576 | }
 577 | 
 578 | .left-0{
 579 |   left: 0px;
 580 | }
 581 | 
 582 | .isolate{
 583 |   isolation: isolate;
 584 | }
 585 | 
 586 | .z-20{
 587 |   z-index: 20;
 588 | }
 589 | 
 590 | .z-\[15\]{
 591 |   z-index: 15;
 592 | }
 593 | 
 594 | .-mx-3{
 595 |   margin-left: -0.75rem;
 596 |   margin-right: -0.75rem;
 597 | }
 598 | 
 599 | .mt-12{
 600 |   margin-top: 3rem;
 601 | }
 602 | 
 603 | .-ml-1\.5{
 604 |   margin-left: -0.375rem;
 605 | }
 606 | 
 607 | .-ml-1{
 608 |   margin-left: -0.25rem;
 609 | }
 610 | 
 611 | .-ml-3{
 612 |   margin-left: -0.75rem;
 613 | }
 614 | 
 615 | .mb-8{
 616 |   margin-bottom: 2rem;
 617 | }
 618 | 
 619 | .mt-8{
 620 |   margin-top: 2rem;
 621 | }
 622 | 
 623 | .mb-3{
 624 |   margin-bottom: 0.75rem;
 625 | }
 626 | 
 627 | .mt-1{
 628 |   margin-top: 0.25rem;
 629 | }
 630 | 
 631 | .mt-5{
 632 |   margin-top: 1.25rem;
 633 | }
 634 | 
 635 | .mt-2{
 636 |   margin-top: 0.5rem;
 637 | }
 638 | 
 639 | .ml-2{
 640 |   margin-left: 0.5rem;
 641 | }
 642 | 
 643 | .inline-block{
 644 |   display: inline-block;
 645 | }
 646 | 
 647 | .flex{
 648 |   display: flex;
 649 | }
 650 | 
 651 | .inline-flex{
 652 |   display: inline-flex;
 653 | }
 654 | 
 655 | .table{
 656 |   display: table;
 657 | }
 658 | 
 659 | .hidden{
 660 |   display: none;
 661 | }
 662 | 
 663 | .h-full{
 664 |   height: 100%;
 665 | }
 666 | 
 667 | .h-12{
 668 |   height: 3rem;
 669 | }
 670 | 
 671 | .h-6{
 672 |   height: 1.5rem;
 673 | }
 674 | 
 675 | .h-10{
 676 |   height: 2.5rem;
 677 | }
 678 | 
 679 | .h-3\.5{
 680 |   height: 0.875rem;
 681 | }
 682 | 
 683 | .h-3{
 684 |   height: 0.75rem;
 685 | }
 686 | 
 687 | .h-2\.5{
 688 |   height: 0.625rem;
 689 | }
 690 | 
 691 | .h-2{
 692 |   height: 0.5rem;
 693 | }
 694 | 
 695 | .h-4{
 696 |   height: 1rem;
 697 | }
 698 | 
 699 | .h-5{
 700 |   height: 1.25rem;
 701 | }
 702 | 
 703 | .h-7{
 704 |   height: 1.75rem;
 705 | }
 706 | 
 707 | .h-16{
 708 |   height: 4rem;
 709 | }
 710 | 
 711 | .h-9{
 712 |   height: 2.25rem;
 713 | }
 714 | 
 715 | .h-24{
 716 |   height: 6rem;
 717 | }
 718 | 
 719 | .min-h-screen{
 720 |   min-height: 100vh;
 721 | }
 722 | 
 723 | .w-fit{
 724 |   width: -webkit-fit-content;
 725 |   width: -moz-fit-content;
 726 |   width: fit-content;
 727 | }
 728 | 
 729 | .w-12{
 730 |   width: 3rem;
 731 | }
 732 | 
 733 | .w-6{
 734 |   width: 1.5rem;
 735 | }
 736 | 
 737 | .w-10{
 738 |   width: 2.5rem;
 739 | }
 740 | 
 741 | .w-3\.5{
 742 |   width: 0.875rem;
 743 | }
 744 | 
 745 | .w-3{
 746 |   width: 0.75rem;
 747 | }
 748 | 
 749 | .w-2\.5{
 750 |   width: 0.625rem;
 751 | }
 752 | 
 753 | .w-2{
 754 |   width: 0.5rem;
 755 | }
 756 | 
 757 | .w-full{
 758 |   width: 100%;
 759 | }
 760 | 
 761 | .w-48{
 762 |   width: 12rem;
 763 | }
 764 | 
 765 | .w-4{
 766 |   width: 1rem;
 767 | }
 768 | 
 769 | .w-2\/3{
 770 |   width: 66.666667%;
 771 | }
 772 | 
 773 | .w-1\/3{
 774 |   width: 33.333333%;
 775 | }
 776 | 
 777 | .w-5{
 778 |   width: 1.25rem;
 779 | }
 780 | 
 781 | .w-3\/5{
 782 |   width: 60%;
 783 | }
 784 | 
 785 | .w-9{
 786 |   width: 2.25rem;
 787 | }
 788 | 
 789 | .min-w-fit{
 790 |   min-width: -webkit-fit-content;
 791 |   min-width: -moz-fit-content;
 792 |   min-width: fit-content;
 793 | }
 794 | 
 795 | .flex-1{
 796 |   flex: 1 1 0%;
 797 | }
 798 | 
 799 | .table-auto{
 800 |   table-layout: auto;
 801 | }
 802 | 
 803 | .flex-col{
 804 |   flex-direction: column;
 805 | }
 806 | 
 807 | .items-start{
 808 |   align-items: flex-start;
 809 | }
 810 | 
 811 | .items-center{
 812 |   align-items: center;
 813 | }
 814 | 
 815 | .justify-center{
 816 |   justify-content: center;
 817 | }
 818 | 
 819 | .justify-between{
 820 |   justify-content: space-between;
 821 | }
 822 | 
 823 | .space-x-2 > :not([hidden]) ~ :not([hidden]){
 824 |   --tw-space-x-reverse: 0;
 825 |   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
 826 |   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 827 | }
 828 | 
 829 | .space-y-2 > :not([hidden]) ~ :not([hidden]){
 830 |   --tw-space-y-reverse: 0;
 831 |   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
 832 |   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 833 | }
 834 | 
 835 | .space-x-1 > :not([hidden]) ~ :not([hidden]){
 836 |   --tw-space-x-reverse: 0;
 837 |   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
 838 |   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 839 | }
 840 | 
 841 | .space-y-3 > :not([hidden]) ~ :not([hidden]){
 842 |   --tw-space-y-reverse: 0;
 843 |   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
 844 |   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 845 | }
 846 | 
 847 | .space-x-3 > :not([hidden]) ~ :not([hidden]){
 848 |   --tw-space-x-reverse: 0;
 849 |   margin-right: calc(0.75rem * var(--tw-space-x-reverse));
 850 |   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 851 | }
 852 | 
 853 | .space-x-4 > :not([hidden]) ~ :not([hidden]){
 854 |   --tw-space-x-reverse: 0;
 855 |   margin-right: calc(1rem * var(--tw-space-x-reverse));
 856 |   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 857 | }
 858 | 
 859 | .space-x-10 > :not([hidden]) ~ :not([hidden]){
 860 |   --tw-space-x-reverse: 0;
 861 |   margin-right: calc(2.5rem * var(--tw-space-x-reverse));
 862 |   margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
 863 | }
 864 | 
 865 | .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
 866 |   --tw-space-y-reverse: 0;
 867 |   margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
 868 |   margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
 869 | }
 870 | 
 871 | .space-y-1 > :not([hidden]) ~ :not([hidden]){
 872 |   --tw-space-y-reverse: 0;
 873 |   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
 874 |   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 875 | }
 876 | 
 877 | .justify-self-end{
 878 |   justify-self: end;
 879 | }
 880 | 
 881 | .rounded-md{
 882 |   border-radius: 0.375rem;
 883 | }
 884 | 
 885 | .rounded-full{
 886 |   border-radius: 9999px;
 887 | }
 888 | 
 889 | .rounded{
 890 |   border-radius: 0.25rem;
 891 | }
 892 | 
 893 | .border-2{
 894 |   border-width: 2px;
 895 | }
 896 | 
 897 | .border{
 898 |   border-width: 1px;
 899 | }
 900 | 
 901 | .border-b{
 902 |   border-bottom-width: 1px;
 903 | }
 904 | 
 905 | .border-b-2{
 906 |   border-bottom-width: 2px;
 907 | }
 908 | 
 909 | .border-gray-800{
 910 |   --tw-border-opacity: 1;
 911 |   border-color: rgb(31 41 55 / var(--tw-border-opacity));
 912 | }
 913 | 
 914 | .border-primary{
 915 |   --tw-border-opacity: 1;
 916 |   border-color: rgb(100 100 230 / var(--tw-border-opacity));
 917 | }
 918 | 
 919 | .border-gray-300{
 920 |   --tw-border-opacity: 1;
 921 |   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 922 | }
 923 | 
 924 | .border-transparent{
 925 |   border-color: transparent;
 926 | }
 927 | 
 928 | .border-gray-100{
 929 |   --tw-border-opacity: 1;
 930 |   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 931 | }
 932 | 
 933 | .border-t-gray-500{
 934 |   --tw-border-opacity: 1;
 935 |   border-top-color: rgb(107 114 128 / var(--tw-border-opacity));
 936 | }
 937 | 
 938 | .border-b-primary{
 939 |   --tw-border-opacity: 1;
 940 |   border-bottom-color: rgb(100 100 230 / var(--tw-border-opacity));
 941 | }
 942 | 
 943 | .bg-white{
 944 |   --tw-bg-opacity: 1;
 945 |   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 946 | }
 947 | 
 948 | .bg-\[\#151e29\]{
 949 |   --tw-bg-opacity: 1;
 950 |   background-color: rgb(21 30 41 / var(--tw-bg-opacity));
 951 | }
 952 | 
 953 | .bg-gray-700{
 954 |   --tw-bg-opacity: 1;
 955 |   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 956 | }
 957 | 
 958 | .bg-primary{
 959 |   --tw-bg-opacity: 1;
 960 |   background-color: rgb(100 100 230 / var(--tw-bg-opacity));
 961 | }
 962 | 
 963 | .bg-gray-800{
 964 |   --tw-bg-opacity: 1;
 965 |   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 966 | }
 967 | 
 968 | .bg-orange-400{
 969 |   --tw-bg-opacity: 1;
 970 |   background-color: rgb(251 146 60 / var(--tw-bg-opacity));
 971 | }
 972 | 
 973 | .bg-black\/30{
 974 |   background-color: rgb(0 0 0 / 0.3);
 975 | }
 976 | 
 977 | .bg-gray-50{
 978 |   --tw-bg-opacity: 1;
 979 |   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 980 | }
 981 | 
 982 | .bg-gray-200{
 983 |   --tw-bg-opacity: 1;
 984 |   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 985 | }
 986 | 
 987 | .bg-blue-50{
 988 |   --tw-bg-opacity: 1;
 989 |   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
 990 | }
 991 | 
 992 | .bg-pink-50{
 993 |   --tw-bg-opacity: 1;
 994 |   background-color: rgb(253 242 248 / var(--tw-bg-opacity));
 995 | }
 996 | 
 997 | .bg-teal-50{
 998 |   --tw-bg-opacity: 1;
 999 |   background-color: rgb(240 253 250 / var(--tw-bg-opacity));
1000 | }
1001 | 
1002 | .bg-orange-50{
1003 |   --tw-bg-opacity: 1;
1004 |   background-color: rgb(255 247 237 / var(--tw-bg-opacity));
1005 | }
1006 | 
1007 | .bg-violet-50{
1008 |   --tw-bg-opacity: 1;
1009 |   background-color: rgb(245 243 255 / var(--tw-bg-opacity));
1010 | }
1011 | 
1012 | .bg-indigo-50{
1013 |   --tw-bg-opacity: 1;
1014 |   background-color: rgb(238 242 255 / var(--tw-bg-opacity));
1015 | }
1016 | 
1017 | .bg-gray-100{
1018 |   --tw-bg-opacity: 1;
1019 |   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1020 | }
1021 | 
1022 | .fill-gray-500{
1023 |   fill: #6b7280;
1024 | }
1025 | 
1026 | .p-2{
1027 |   padding: 0.5rem;
1028 | }
1029 | 
1030 | .p-0\.5{
1031 |   padding: 0.125rem;
1032 | }
1033 | 
1034 | .p-0{
1035 |   padding: 0px;
1036 | }
1037 | 
1038 | .px-3{
1039 |   padding-left: 0.75rem;
1040 |   padding-right: 0.75rem;
1041 | }
1042 | 
1043 | .py-3{
1044 |   padding-top: 0.75rem;
1045 |   padding-bottom: 0.75rem;
1046 | }
1047 | 
1048 | .py-0\.5{
1049 |   padding-top: 0.125rem;
1050 |   padding-bottom: 0.125rem;
1051 | }
1052 | 
1053 | .py-0{
1054 |   padding-top: 0px;
1055 |   padding-bottom: 0px;
1056 | }
1057 | 
1058 | .px-6{
1059 |   padding-left: 1.5rem;
1060 |   padding-right: 1.5rem;
1061 | }
1062 | 
1063 | .py-5{
1064 |   padding-top: 1.25rem;
1065 |   padding-bottom: 1.25rem;
1066 | }
1067 | 
1068 | .px-2{
1069 |   padding-left: 0.5rem;
1070 |   padding-right: 0.5rem;
1071 | }
1072 | 
1073 | .px-1\.5{
1074 |   padding-left: 0.375rem;
1075 |   padding-right: 0.375rem;
1076 | }
1077 | 
1078 | .py-1{
1079 |   padding-top: 0.25rem;
1080 |   padding-bottom: 0.25rem;
1081 | }
1082 | 
1083 | .px-1{
1084 |   padding-left: 0.25rem;
1085 |   padding-right: 0.25rem;
1086 | }
1087 | 
1088 | .py-2{
1089 |   padding-top: 0.5rem;
1090 |   padding-bottom: 0.5rem;
1091 | }
1092 | 
1093 | .py-6{
1094 |   padding-top: 1.5rem;
1095 |   padding-bottom: 1.5rem;
1096 | }
1097 | 
1098 | .px-4{
1099 |   padding-left: 1rem;
1100 |   padding-right: 1rem;
1101 | }
1102 | 
1103 | .py-1\.5{
1104 |   padding-top: 0.375rem;
1105 |   padding-bottom: 0.375rem;
1106 | }
1107 | 
1108 | .pt-6{
1109 |   padding-top: 1.5rem;
1110 | }
1111 | 
1112 | .pb-0{
1113 |   padding-bottom: 0px;
1114 | }
1115 | 
1116 | .pl-2{
1117 |   padding-left: 0.5rem;
1118 | }
1119 | 
1120 | .pb-3{
1121 |   padding-bottom: 0.75rem;
1122 | }
1123 | 
1124 | .text-center{
1125 |   text-align: center;
1126 | }
1127 | 
1128 | .align-top{
1129 |   vertical-align: top;
1130 | }
1131 | 
1132 | .font-poppins{
1133 |   font-family: Poppins, sans-serif;
1134 | }
1135 | 
1136 | .text-sm{
1137 |   font-size: 0.875rem;
1138 |   line-height: 1.25rem;
1139 | }
1140 | 
1141 | .text-lg{
1142 |   font-size: 1.125rem;
1143 |   line-height: 1.75rem;
1144 | }
1145 | 
1146 | .text-base{
1147 |   font-size: 1rem;
1148 |   line-height: 1.5rem;
1149 | }
1150 | 
1151 | .text-xs{
1152 |   font-size: 0.75rem;
1153 |   line-height: 1rem;
1154 | }
1155 | 
1156 | .text-xxs{
1157 |   font-size: .65rem;
1158 | }
1159 | 
1160 | .text-xl{
1161 |   font-size: 1.25rem;
1162 |   line-height: 1.75rem;
1163 | }
1164 | 
1165 | .font-semibold{
1166 |   font-weight: 600;
1167 | }
1168 | 
1169 | .font-medium{
1170 |   font-weight: 500;
1171 | }
1172 | 
1173 | .uppercase{
1174 |   text-transform: uppercase;
1175 | }
1176 | 
1177 | .tracking-wide{
1178 |   letter-spacing: 0.025em;
1179 | }
1180 | 
1181 | .tracking-wider{
1182 |   letter-spacing: 0.05em;
1183 | }
1184 | 
1185 | .text-gray-800{
1186 |   --tw-text-opacity: 1;
1187 |   color: rgb(31 41 55 / var(--tw-text-opacity));
1188 | }
1189 | 
1190 | .text-white{
1191 |   --tw-text-opacity: 1;
1192 |   color: rgb(255 255 255 / var(--tw-text-opacity));
1193 | }
1194 | 
1195 | .text-gray-300{
1196 |   --tw-text-opacity: 1;
1197 |   color: rgb(209 213 219 / var(--tw-text-opacity));
1198 | }
1199 | 
1200 | .text-gray-900{
1201 |   --tw-text-opacity: 1;
1202 |   color: rgb(17 24 39 / var(--tw-text-opacity));
1203 | }
1204 | 
1205 | .text-gray-500{
1206 |   --tw-text-opacity: 1;
1207 |   color: rgb(107 114 128 / var(--tw-text-opacity));
1208 | }
1209 | 
1210 | .text-gray-700{
1211 |   --tw-text-opacity: 1;
1212 |   color: rgb(55 65 81 / var(--tw-text-opacity));
1213 | }
1214 | 
1215 | .text-gray-600{
1216 |   --tw-text-opacity: 1;
1217 |   color: rgb(75 85 99 / var(--tw-text-opacity));
1218 | }
1219 | 
1220 | .text-gray-400{
1221 |   --tw-text-opacity: 1;
1222 |   color: rgb(156 163 175 / var(--tw-text-opacity));
1223 | }
1224 | 
1225 | .text-blue-500{
1226 |   --tw-text-opacity: 1;
1227 |   color: rgb(59 130 246 / var(--tw-text-opacity));
1228 | }
1229 | 
1230 | .text-pink-500{
1231 |   --tw-text-opacity: 1;
1232 |   color: rgb(236 72 153 / var(--tw-text-opacity));
1233 | }
1234 | 
1235 | .text-teal-500{
1236 |   --tw-text-opacity: 1;
1237 |   color: rgb(20 184 166 / var(--tw-text-opacity));
1238 | }
1239 | 
1240 | .text-orange-500{
1241 |   --tw-text-opacity: 1;
1242 |   color: rgb(249 115 22 / var(--tw-text-opacity));
1243 | }
1244 | 
1245 | .text-violet-500{
1246 |   --tw-text-opacity: 1;
1247 |   color: rgb(139 92 246 / var(--tw-text-opacity));
1248 | }
1249 | 
1250 | .text-indigo-500{
1251 |   --tw-text-opacity: 1;
1252 |   color: rgb(99 102 241 / var(--tw-text-opacity));
1253 | }
1254 | 
1255 | .antialiased{
1256 |   -webkit-font-smoothing: antialiased;
1257 |   -moz-osx-font-smoothing: grayscale;
1258 | }
1259 | 
1260 | .accent-primary{
1261 |   accent-color: #6464e6;
1262 | }
1263 | 
1264 | .shadow-xl{
1265 |   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
1266 |   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1267 |   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1268 | }
1269 | 
1270 | .outline-none{
1271 |   outline: 2px solid transparent;
1272 |   outline-offset: 2px;
1273 | }
1274 | 
1275 | .drop-shadow-sm{
1276 |   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
1277 |   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1278 | }
1279 | 
1280 | .transition{
1281 |   transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1282 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1283 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
1284 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1285 |   transition-duration: 150ms;
1286 | }
1287 | 
1288 | .ease-in-out{
1289 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1290 | }
1291 | 
1292 | /* Hide scrollbar for Chrome, Safari and Opera */
1293 | 
1294 | /* Hide scrollbar for IE, Edge and Firefox */
1295 | 
1296 | .hover\:border-gray-400:hover{
1297 |   --tw-border-opacity: 1;
1298 |   border-color: rgb(156 163 175 / var(--tw-border-opacity));
1299 | }
1300 | 
1301 | .hover\:border-b-primary:hover{
1302 |   --tw-border-opacity: 1;
1303 |   border-bottom-color: rgb(100 100 230 / var(--tw-border-opacity));
1304 | }
1305 | 
1306 | .hover\:bg-gray-700:hover{
1307 |   --tw-bg-opacity: 1;
1308 |   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
1309 | }
1310 | 
1311 | .hover\:bg-primary\/90:hover{
1312 |   background-color: rgb(100 100 230 / 0.9);
1313 | }
1314 | 
1315 | .hover\:bg-gray-300:hover{
1316 |   --tw-bg-opacity: 1;
1317 |   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
1318 | }
1319 | 
1320 | .hover\:bg-primary\/5:hover{
1321 |   background-color: rgb(100 100 230 / 0.05);
1322 | }
1323 | 
1324 | .hover\:text-white:hover{
1325 |   --tw-text-opacity: 1;
1326 |   color: rgb(255 255 255 / var(--tw-text-opacity));
1327 | }
1328 | 
1329 | .hover\:text-gray-200:hover{
1330 |   --tw-text-opacity: 1;
1331 |   color: rgb(229 231 235 / var(--tw-text-opacity));
1332 | }
1333 | 
1334 | .hover\:text-gray-600:hover{
1335 |   --tw-text-opacity: 1;
1336 |   color: rgb(75 85 99 / var(--tw-text-opacity));
1337 | }
1338 | 
1339 | .focus\:text-primary:focus{
1340 |   --tw-text-opacity: 1;
1341 |   color: rgb(100 100 230 / var(--tw-text-opacity));
1342 | }
1343 | 
1344 | .focus\:drop-shadow:focus{
1345 |   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
1346 |   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
1347 | }
1348 | 
1349 | @media (min-width: 640px){
1350 |   .sm\:block{
1351 |     display: block;
1352 |   }
1353 | 
1354 |   .sm\:flex{
1355 |     display: flex;
1356 |   }
1357 | 
1358 |   .sm\:inline-flex{
1359 |     display: inline-flex;
1360 |   }
1361 | }
1362 | 
1363 | @media (min-width: 768px){
1364 |   .md\:w-60{
1365 |     width: 15rem;
1366 |   }
1367 | 
1368 |   .md\:w-1\/2{
1369 |     width: 50%;
1370 |   }
1371 | 
1372 |   .md\:px-4{
1373 |     padding-left: 1rem;
1374 |     padding-right: 1rem;
1375 |   }
1376 | }
1377 | 
1378 | @media (min-width: 1024px){
1379 |   .lg\:fixed{
1380 |     position: fixed;
1381 |   }
1382 | 
1383 |   .lg\:-mx-6{
1384 |     margin-left: -1.5rem;
1385 |     margin-right: -1.5rem;
1386 |   }
1387 | 
1388 |   .lg\:ml-60{
1389 |     margin-left: 15rem;
1390 |   }
1391 | 
1392 |   .lg\:flex{
1393 |     display: flex;
1394 |   }
1395 | 
1396 |   .lg\:table-cell{
1397 |     display: table-cell;
1398 |   }
1399 | 
1400 |   .lg\:hidden{
1401 |     display: none;
1402 |   }
1403 | 
1404 |   .lg\:w-60{
1405 |     width: 15rem;
1406 |   }
1407 | 
1408 |   .lg\:w-fit{
1409 |     width: -webkit-fit-content;
1410 |     width: -moz-fit-content;
1411 |     width: fit-content;
1412 |   }
1413 | 
1414 |   .lg\:flex-col{
1415 |     flex-direction: column;
1416 |   }
1417 | 
1418 |   .lg\:px-6{
1419 |     padding-left: 1.5rem;
1420 |     padding-right: 1.5rem;
1421 |   }
1422 | 
1423 |   .lg\:px-9{
1424 |     padding-left: 2.25rem;
1425 |     padding-right: 2.25rem;
1426 |   }
1427 | 
1428 |   .lg\:py-10{
1429 |     padding-top: 2.5rem;
1430 |     padding-bottom: 2.5rem;
1431 |   }
1432 | 
1433 |   .lg\:px-8{
1434 |     padding-left: 2rem;
1435 |     padding-right: 2rem;
1436 |   }
1437 | 
1438 |   .lg\:shadow-none{
1439 |     --tw-shadow: 0 0 #0000;
1440 |     --tw-shadow-colored: 0 0 #0000;
1441 |     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1442 |   }
1443 | }
1444 | 
1445 | @media (min-width: 1280px){
1446 |   .xl\:table-cell{
1447 |     display: table-cell;
1448 |   }
1449 | }
1450 | 
1451 | @media (min-width: 1536px){
1452 |   .\32xl\:mx-auto{
1453 |     margin-left: auto;
1454 |     margin-right: auto;
1455 |   }
1456 | 
1457 |   .\32xl\:w-80{
1458 |     width: 20rem;
1459 |   }
1460 | 
1461 |   .\32xl\:max-w-\[1920px\]{
1462 |     max-width: 1920px;
1463 |   }
1464 | 
1465 |   .\32xl\:border-r-2{
1466 |     border-right-width: 2px;
1467 |   }
1468 | }


--------------------------------------------------------------------------------
/style/tailwind.css:
--------------------------------------------------------------------------------
 1 | /* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap'); */
 2 | /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); */
 3 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
 4 | 
 5 | @tailwind base;
 6 | @tailwind components;
 7 | @tailwind utilities;
 8 | 
 9 | 
10 | 
11 | @layer base{
12 |     
13 | }
14 | 
15 | @layer utilities{
16 |     /* Hide scrollbar for Chrome, Safari and Opera */
17 |     .no-scrollbar::-webkit-scrollbar {
18 |         display: none;
19 |     }
20 | 
21 |     /* Hide scrollbar for IE, Edge and Firefox */
22 |     .no-scrollbar {
23 |         -ms-overflow-style: none;  /* IE and Edge */
24 |         scrollbar-width: none;  /* Firefox */
25 |     }
26 | 
27 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme')
 2 | 
 3 | module.exports = {
 4 |   darkMode: 'class', //false, class, media
 5 |   content: ["*.{html,js}"],
 6 |   theme: {
 7 |     screens:{
 8 |       'xs': '350px',
 9 |       ...defaultTheme.screens,
10 |     },
11 |     extend: {
12 |       colors: {
13 |         primary: '#6464e6',
14 |       },
15 |       fontFamily: {
16 |         'montserrat': ['Montserrat','sans-serif'],
17 |         'poppins': ['Poppins','sans-serif'],
18 |       },
19 |       fontSize: {
20 |         'xxs': '.65rem',
21 |       },
22 |       
23 |     }
24 |   },
25 |   plugins: [],
26 | }
27 | 


--------------------------------------------------------------------------------