Add animation on products table

Author: thecodeholic

backend/src/views/Products/ProductsTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white p-4 rounded-lg shadow">
+  <div class="bg-white p-4 rounded-lg shadow animate-fade-in-down">
     <div class="flex justify-between border-b-2 pb-3">
       <div class="flex items-center">
         <span class="whitespace-nowrap mr-3">Per Page</span>
@@ -57,7 +57,8 @@
       </tr>
       </tbody>
       <tbody v-else>
-      <tr v-for="product of products.data">
+      <tr v-for="(product, index) of products.data" class="animate-fade-in-down"
+          :style="{'animation-delay': (index * 0.1) + 's'}">
         <td class="border-b p-2 ">{{ product.id }}</td>
         <td class="border-b p-2 ">
           <img class="w-16 h-16 object-cover" :src="product.image_url" :alt="product.title">

backend/tailwind.config.js

@@ -1,13 +1,29 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [
-        "./index.html",
-        "./src/**/*.{vue,js,ts,jsx,tsx}",
-    ],
-    theme: {
-        extend: {},
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      keyframes: {
+        'fade-in-down': {
+          "from": {
+            transform: "translateY(-0.75rem)",
+            opacity: '0'
+          },
+          "to": {
+            transform: "translateY(0rem)",
+            opacity: '1'
+          },
+        },
+      },
+      animation: {
+        'fade-in-down': "fade-in-down 0.2s ease-in-out both",
+      },
     },
     plugins: [
       require('@tailwindcss/forms'),
     ],
+  }
 }