add component base

src/components/Typography/UiParagraph.vue

@@ -0,0 +1,45 @@
+<template>
+  <component
+    :is="as"
+    class="text-gray-900"
+    :class="[
+      {
+        'text-2xl lg:text-3xl 2xl:text-4xl': size === '600',
+      }, // 24px
+      {
+        'text-xl lg:text-2xl 2xl:text-3xl': size === '500',
+      }, // 20px
+      {
+        'text-lg lg:text-xl 2xl:text-2xl': size === '400',
+      }, // 18px
+      {
+        'text-base lg:text-lg': size === '300',
+      }, // 16px
+      {
+        'text-sm': size === '200',
+      }, // 14px
+    ]"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue'
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'p',
+  },
+  /**
+   * Tailwind text size from 600 to 200
+   */
+  size: {
+    type: String,
+    default: '300',
+  },
+})
+
+const { size, as } = toRefs(props)
+</script>