Merge pull request #7 from TailGrids/2.2

2.2

.npmignore

@@ -0,0 +1,4 @@
+node_modules
+./node_modules
+./node_modules/
+assets/images/

README.md

@@ -1,8 +1,10 @@
 # Free Tailwind CSS UI Components by TailGrids
 
-TailGrids is library of high-quality Tailwind CSS UI components and blocks. Crafted for - modern websites, landing pages and web apps. Comes with all essential UI components & elements, consistent design, copy-paste UI building tool and everything you can expect from a top-notch UI library.
+TailGrids is a library of high-quality Tailwind CSS UI components and blocks, designed specifically for modern websites, landing pages, and web apps. It comes with all the essential UI components and elements you would expect from a top-notch UI library, featuring a consistent design and a copy-paste UI building tool. 
 
-The free core version comes with tons of free UI components along with all core components. Feel free to use it with your personal or commercial projects, and don't forget to support and inspire our team by starring this repo.
+The free core version provides numerous UI components along with all core components. It is available for both personal and commercial projects. Please feel free to use it, and don't forget to support and inspire our team by starring this repo. 
+
+It's worth noting that this same set of components is also available for React and Vue.js.
 
 ### [🚀 Explore All Components](https://tailgrids.com/components)
 
@@ -12,26 +14,36 @@ The free core version comes with tons of free UI components along with all core
 
 ### Installing via NPM
 
-As a NPM package make sure that you have installed [Node.js](https://nodejs.org) and [Tailwind CSS](https://tailwindcss.com)
+Ensure you've installed [Node.js](https://nodejs.org) and [Tailwind CSS](https://tailwindcss.com) before TailGrids NPM package. Here's a quick guide to get you started with Tailgrids:
 
-1. Install Tailgrids as a dependency using NPM by running the command below:
+**1. Install the [TailGrids NPM package](https://www.npmjs.com/package/tailgrids/?ref=tailgrids.com):**
 
-```
+```bash
 npm i tailgrids
 ```
+**2. Add the TailGrids plugin to your `tailwind.config.js` file:**
 
-2. Require Tailgrids as a plugin inside the `tailwind.config.js` file:
+```javascript
+module.exports = {
+  // Your existing Tailwind CSS configuration goes here
 
+  plugins: [require("tailgrids/plugin")],
+};
 ```
-module.exports = {
-  //... other config of your project
+**3. [Browse the components](https://tailgrids.com/components) and simply copy and paste the ones you like into your projects.**
 
-  plugins: [
-    require('tailgrids/plugin')
-  ]
+And that's it! You're all set to start using TailGrids in your project. Happy coding!
+
+### [⚡ Get PRO Version](https://tailgrids.com/pricing)
+
+### [📄 Detailed Documentation and Usage Guide](https://tailgrids.com/docs)
+
+### [👉 TailAdmin React](https://tailgrids.com/react)
+
+### [👉 TailAdmin Vue](https://tailgrids.com/vue)
+
+### [🖌️ TailGrids Figma](https://tailgrids.com/figma)
 
-}
-```
 
 ## 💙 Support
 
@@ -40,12 +52,54 @@ and sharing with friends. If you like the the library consider purchasing the [P
 
 ## Changelog
 
-### version 2.1.0
+### Version 2.2.0
+(May, 2024)
+
+- Added over 80 new components.
+- Updated the core style guide.
+- Revised the file structure.
+- Enhanced the plugin to reduce dependencies.
+- Updated the Tailwind CSS version along with other dependencies.
+
+### Version 2.1.0
+(October, 2023)
+
+- Introduced dark mode.
+- Polished existing components.
+- Incorporated a few core components.
+- Updated dependent packages.
+
+## Version 2.0.0
+(February, 2023)
+
+- This major release doubled our components, introduced dark mode, and expanded our components & example templates.
+- 500+ Tailwind UI Components (200+ Newly Added)
+- 12 Templates (8 Newly Added)
+- Dark mode for all Components
+- Updated Figma File with New UI Components
+- 2 E-Commerce Templates
+- 90+ Advanced | Core, Marketing and App UI Components
+- 50+ Dashboard UI Components
+- 100+ eCommerce Components
+
+## Version 1.1.0
+(March, 2022)
+
+We focused on enhancing your design experience with Figma integration and new templates.
+
+- 2 New Templates 
+- Figma Source for UI Components 
+- Responsive Buttons / Viewport 
+- Dedicated Templates Gallery 
+
+## Initial Release 
+(February, 2022)
+
+The journey began! We launched TailGrids with a strong foundation of components and templates.
 
--Dark mode added
--Polished components
--Added few core components
--Update dependency packages
+ - Initial 300+ UI Components 
+ - Two Example Templates 
+ - NPM Package for Open Source Version
 
 ## 🎁 License
 

404.html → application/404/404-01.html

@@ -7,10 +7,10 @@
     <title>Error 404 | TailGrids</title>
     <link
       rel="shortcut icon"
-      href="assets/images/favicon.svg"
+      href="../../assets/images/favicon.svg"
       type="image/x-icon"
     />
-    <link rel="stylesheet" href="assets/css/tailwind.css" />
+    <link rel="stylesheet" href="../../assets/css/tailwind.css" />
   </head>
   <body>
     <!-- ====== Error 404 Section Start -->

blog.html → application/blogs/blog-01.html

@@ -7,14 +7,14 @@
     <title>Blog | TailGrids</title>
     <link
       rel="shortcut icon"
-      href="assets/images/favicon.svg"
+      href="../../assets/images/favicon.svg"
       type="image/x-icon"
     />
-    <link rel="stylesheet" href="assets/css/tailwind.css" />
+    <link rel="stylesheet" href="../../assets/css/tailwind.css" />
   </head>
   <body>
     <!-- ====== Blog Section Start -->
-    <section class="bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]">
+    <section class="bg-white pb-10 pt-20 lg:pb-20 lg:pt-[120px] dark:bg-dark">
       <div class="container mx-auto">
         <div class="-mx-4 flex flex-wrap justify-center">
           <div class="w-full px-4">
@@ -23,7 +23,7 @@
                 Our Blogs
               </span>
               <h2
-                class="mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px]"
+                class="mb-4 text-3xl font-bold text-dark sm:text-4xl md:text-[40px] dark:text-white"
               >
                 Our Recent News
               </h2>
@@ -40,7 +40,7 @@
             <div class="mb-10 w-full">
               <div class="mb-8 overflow-hidden rounded">
                 <img
-                  src="assets/images/blogs/blog-01/image-01.jpg"
+                  src="../images/blogs/blog-01/image-01.jpg"
                   alt="image"
                   class="w-full"
                 />
@@ -54,7 +54,7 @@
                 <h3>
                   <a
                     href="javascript:void(0)"
-                    class="mb-4 inline-block text-xl font-semibold text-dark hover:text-primary dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
+                    class="mb-4 inline-block text-xl font-semibold text-dark hover:text-primary sm:text-2xl lg:text-xl xl:text-2xl dark:text-white"
                   >
                     Meet AutoManage, the best AI management tools
                   </a>
@@ -70,7 +70,7 @@ <h3>
             <div class="mb-10 w-full">
               <div class="mb-8 overflow-hidden rounded">
                 <img
-                  src="assets/images/blogs/blog-01/image-02.jpg"
+                  src="../images/blogs/blog-01/image-02.jpg"
                   alt="image"
                   class="w-full"
                 />
@@ -84,7 +84,7 @@ <h3>
                 <h3>
                   <a
                     href="javascript:void(0)"
-                    class="mb-4 inline-block text-xl font-semibold text-dark hover:text-primary dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
+                    class="mb-4 inline-block text-xl font-semibold text-dark hover:text-primary sm:text-2xl lg:text-xl xl:text-2xl dark:text-white"
                   >
                     How to earn more money as a wellness coach
                   </a>
@@ -100,7 +100,7 @@ <h3>
             <div class="mb-10 w-full">
               <div class="mb-8 overflow-hidden rounded">
                 <img
-                  src="assets/images/blogs/blog-01/image-03.jpg"
+                  src="../images/blogs/blog-01/image-03.jpg"
                   alt="image"
                   class="w-full"
                 />
@@ -114,7 +114,7 @@ <h3>
                 <h3>
                   <a
                     href="javascript:void(0)"
-                    class="mb-4 inline-block text-xl font-semibold text-dark hover:text-primary dark:text-white sm:text-2xl lg:text-xl xl:text-2xl"
+                    class="mb-4 inline-block text-xl font-semibold text-dark hover:text-primary sm:text-2xl lg:text-xl xl:text-2xl dark:text-white"
                   >
                     The no-fuss guide to upselling and cross selling
                   </a>

card.html → application/cards/card-01.html

@@ -7,30 +7,30 @@
     <title>Cards | TailGrids</title>
     <link
       rel="shortcut icon"
-      href="assets/images/favicon.svg"
+      href="../../assets/images/favicon.svg"
       type="image/x-icon"
     />
-    <link rel="stylesheet" href="assets/css/tailwind.css" />
+    <link rel="stylesheet" href="../../assets/css/tailwind.css" />
   </head>
   <body>
     <!-- ====== Cards Section Start -->
-    <section class="bg-gray-2 pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]">
+    <section class="bg-gray-2 pb-10 pt-20 lg:pb-20 lg:pt-[120px] dark:bg-dark">
       <div class="container mx-auto">
         <div class="-mx-4 flex flex-wrap">
           <div class="w-full px-4 md:w-1/2 xl:w-1/3">
             <div
               class="mb-10 overflow-hidden rounded-lg bg-white shadow-1 duration-300 hover:shadow-3 dark:bg-dark-2 dark:shadow-card dark:hover:shadow-3"
             >
               <img
-                src="assets/images/cards/card-01/image-01.jpg"
+                src="../images/cards/card-01/image-01.jpg"
                 alt="image"
                 class="w-full"
               />
               <div class="p-8 text-center sm:p-9 md:p-7 xl:p-9">
                 <h3>
                   <a
                     href="javascript:void(0)"
-                    class="mb-4 block text-xl font-semibold text-dark hover:text-primary dark:text-white sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px]"
+                    class="mb-4 block text-xl font-semibold text-dark hover:text-primary sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px] dark:text-white"
                   >
                     50+ Best creative website themes & templates
                   </a>
@@ -56,15 +56,15 @@ <h3>
               class="mb-10 overflow-hidden rounded-lg bg-white shadow-1 duration-300 hover:shadow-3 dark:bg-dark-2 dark:shadow-card dark:hover:shadow-3"
             >
               <img
-                src="assets/images/cards/card-01/image-02.jpg"
+                src="../images/cards/card-01/image-02.jpg"
                 alt="image"
                 class="w-full"
               />
               <div class="p-8 text-center sm:p-9 md:p-7 xl:p-9">
                 <h3>
                   <a
                     href="javascript:void(0)"
-                    class="mb-4 block text-xl font-semibold text-dark hover:text-primary dark:text-white sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px]"
+                    class="mb-4 block text-xl font-semibold text-dark hover:text-primary sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px] dark:text-white"
                   >
                     The ultimate UX and UI guide to card design
                   </a>
@@ -88,15 +88,15 @@ <h3>
               class="mb-10 overflow-hidden rounded-lg bg-white shadow-1 duration-300 hover:shadow-3 dark:bg-dark-2 dark:shadow-card dark:hover:shadow-3"
             >
               <img
-                src="assets/images/cards/card-01/image-03.jpg"
+                src="../images/cards/card-01/image-03.jpg"
                 alt="image"
                 class="w-full"
               />
               <div class="p-8 text-center sm:p-9 md:p-7 xl:p-9">
                 <h3>
                   <a
                     href="javascript:void(0)"
-                    class="mb-4 block text-xl font-semibold text-dark hover:text-primary dark:text-white sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px]"
+                    class="mb-4 block text-xl font-semibold text-dark hover:text-primary sm:text-[22px] md:text-xl lg:text-[22px] xl:text-xl 2xl:text-[22px] dark:text-white"
                   >
                     Creative Card Component designs graphic elements
                   </a>

contact.html → application/contacts/contact-01.html

@@ -7,15 +7,15 @@
     <title>Contact | TailGrids</title>
     <link
       rel="shortcut icon"
-      href="assets/images/favicon.svg"
+      href="../../assets/images/favicon.svg"
       type="image/x-icon"
     />
-    <link rel="stylesheet" href="assets/css/tailwind.css" />
+    <link rel="stylesheet" href="../../assets/css/tailwind.css" />
   </head>
   <body>
     <!-- ====== Contact Section Start -->
     <section
-      class="relative z-10 overflow-hidden bg-white py-20 dark:bg-dark lg:py-[120px]"
+      class="relative z-10 overflow-hidden bg-white py-20 lg:py-[120px] dark:bg-dark"
     >
       <div class="container mx-auto">
         <div class="-mx-4 flex flex-wrap lg:justify-between">
@@ -25,7 +25,7 @@
                 Contact Us
               </span>
               <h2
-                class="mb-6 text-[32px] font-bold uppercase text-dark dark:text-white sm:text-[40px] lg:text-[36px] xl:text-[40px]"
+                class="mb-6 text-[32px] font-bold uppercase text-dark sm:text-[40px] lg:text-[36px] xl:text-[40px] dark:text-white"
               >
                 GET IN TOUCH WITH US
               </h2>
@@ -136,7 +136,7 @@ <h4 class="mb-1 text-xl font-bold text-dark dark:text-white">
           </div>
           <div class="w-full px-4 lg:w-1/2 xl:w-5/12">
             <div
-              class="relative rounded-lg bg-white p-8 shadow-lg dark:bg-dark-2 sm:p-12"
+              class="relative rounded-lg bg-white p-8 shadow-lg sm:p-12 dark:bg-dark-2"
             >
               <form>
                 <div class="mb-6">

footer.html → application/footers/footer-01.html

@@ -7,15 +7,15 @@
     <title>Footer | TailGrids</title>
     <link
       rel="shortcut icon"
-      href="assets/images/favicon.svg"
+      href="../../assets/images/favicon.svg"
       type="image/x-icon"
     />
-    <link rel="stylesheet" href="assets/css/tailwind.css" />
+    <link rel="stylesheet" href="../../assets/css/tailwind.css" />
   </head>
   <body>
     <!-- ====== Footer Section Start -->
     <footer
-      class="relative z-10 bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]"
+      class="relative z-10 bg-white pb-10 pt-20 lg:pb-20 lg:pt-[120px] dark:bg-dark"
     >
       <div class="container mx-auto">
         <div class="-mx-4 flex flex-wrap">
@@ -26,12 +26,12 @@
                 class="mb-6 inline-block max-w-[160px]"
               >
                 <img
-                  src="assets/images/logo/logo.svg"
+                  src="../../assets/images/logo/logo.svg"
                   alt="logo"
                   class="max-w-full dark:hidden"
                 />
                 <img
-                  src="assets/images/logo/logo-white.svg"
+                  src="../../assets/images/logo/logo-white.svg"
                   alt="logo"
                   class="hidden max-w-full dark:block"
                 />
@@ -207,7 +207,7 @@ <h4 class="mb-9 text-lg font-semibold text-dark dark:text-white">
               <div class="mb-6 flex items-center">
                 <a
                   href="javascript:void(0)"
-                  class="mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-stroke text-dark hover:border-primary hover:bg-primary hover:text-white dark:border-dark-3 dark:text-white dark:hover:border-primary sm:mr-4 lg:mr-3 xl:mr-4"
+                  class="mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-stroke text-dark hover:border-primary hover:bg-primary hover:text-white sm:mr-4 lg:mr-3 xl:mr-4 dark:border-dark-3 dark:text-white dark:hover:border-primary"
                 >
                   <svg
                     width="8"
@@ -222,7 +222,7 @@ <h4 class="mb-9 text-lg font-semibold text-dark dark:text-white">
                 </a>
                 <a
                   href="javascript:void(0)"
-                  class="mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-stroke text-dark hover:border-primary hover:bg-primary hover:text-white dark:border-dark-3 dark:text-white dark:hover:border-primary sm:mr-4 lg:mr-3 xl:mr-4"
+                  class="mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-stroke text-dark hover:border-primary hover:bg-primary hover:text-white sm:mr-4 lg:mr-3 xl:mr-4 dark:border-dark-3 dark:text-white dark:hover:border-primary"
                 >
                   <svg
                     width="16"
@@ -237,7 +237,7 @@ <h4 class="mb-9 text-lg font-semibold text-dark dark:text-white">
                 </a>
                 <a
                   href="javascript:void(0)"
-                  class="mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-stroke text-dark hover:border-primary hover:bg-primary hover:text-white dark:border-dark-3 dark:text-white dark:hover:border-primary sm:mr-4 lg:mr-3 xl:mr-4"
+                  class="mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-stroke text-dark hover:border-primary hover:bg-primary hover:text-white sm:mr-4 lg:mr-3 xl:mr-4 dark:border-dark-3 dark:text-white dark:hover:border-primary"
                 >
                   <svg
                     width="16"
@@ -252,7 +252,7 @@ <h4 class="mb-9 text-lg font-semibold text-dark dark:text-white">
                 </a>
                 <a
                   href="javascript:void(0)"
-                  class="mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-stroke text-dark hover:border-primary hover:bg-primary hover:text-white dark:border-dark-3 dark:text-white dark:hover:border-primary sm:mr-4 lg:mr-3 xl:mr-4"
+                  class="mr-3 flex h-8 w-8 items-center justify-center rounded-full border border-stroke text-dark hover:border-primary hover:bg-primary hover:text-white sm:mr-4 lg:mr-3 xl:mr-4 dark:border-dark-3 dark:text-white dark:hover:border-primary"
                 >
                   <svg
                     width="14"