change responsive]

src/components/mobile/MobileCard.vue

@@ -0,0 +1,28 @@
+<template>
+  <article
+    class="rounded-2xl border border-gray-200 bg-white shadow-sm"
+    :class="[paddingClass, clickable ? 'cursor-pointer' : '']"
+    @click="clickable ? $emit('click') : undefined"
+  >
+    <slot />
+  </article>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    clickable?: boolean
+    compact?: boolean
+  }>(),
+  {
+    clickable: false,
+    compact: true
+  }
+)
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const paddingClass = computed(() => (props.compact ? 'px-3 py-3' : 'p-4'))
+</script>