adding animation CSS file

src/resources/css/animations.css

@@ -0,0 +1,12 @@
+/** https://thinkdobecreate.com/articles/css-animating-newly-added-element/ **/
+
+.anim-show {
+    animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+}
+
+@keyframes show {
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+}

src/resources/css/app.css

@@ -2,6 +2,7 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import 'animations.css';
 @import 'typography.css';
 
 @import 'components/buttons.css';
@@ -9,6 +10,7 @@
 @import 'components/tables.css';
 
 body {
+    min-height: 100vh;
     overflow: auto;
     scrollbar-gutter: stable both-edges;
 }

src/resources/js/Components/Card.vue

@@ -1,9 +1,5 @@
 <script setup>
-import { ref } from 'vue'
-
-defineEmits([])
-
-const attrs = useAttrs()
+import { computed, useSlots } from 'vue'
 
 const props = defineProps({
   class: {