11-pricing-table-challenge-with-tailwind-and-vue

src/App.vue

@@ -1,8 +1,45 @@
 <script setup lang="ts">
-import Prose from "./components/Prose.vue";
+import PricingCard from "./components/PricingCardComplete.vue";
 </script>
 <template>
-  <div class="m-10">
-    <Prose />
+  <div>
+    <PricingCard
+      :price="29"
+      :features="[
+        'Unlimited Access to All Features',
+        '24/7 Customer Support',
+        'Customizable Dashboard',
+        'Advanced Analytics Tools',
+        'Integration with Third-Party Services',
+        'Secure Data Encryption',
+      ]"
+      name="Starter"
+      description="Best option for personal use & for your next project."
+    ></PricingCard>
+    <PricingCard
+      name="Plus"
+      :features="[
+        'Multi-User Collaboration Tools',
+        'Real-Time Data Backup',
+        'Mobile App Access',
+        'Custom Branding Options',
+        'Automated Reporting System',
+      ]"
+      :price="50"
+      description="Great for small teams and anyone looking to scale"
+    ></PricingCard>
+
+    <PricingCard
+      name="Enterprise"
+      :features="[
+        'Priority Feature Updates',
+        'Extended Data Storage Capacity',
+        'Personalized User Experience',
+        'In-Depth Training Materials',
+        'Dedicated Account Manager',
+      ]"
+      :price="150"
+      description="Best for large scale uses and extended redistribution rights."
+    ></PricingCard>
   </div>
 </template>

src/components/PricingCard.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+defineProps<{
+  price: number;
+  features: string[];
+  name: string;
+  description: string;
+}>();
+</script>
+<template>
+  <div>
+    <div>
+      <h3>{{ name }}</h3>
+      <p>
+        {{ description }}
+      </p>
+      <div>
+        <span>${{ price }}</span>
+        <span>/month</span>
+      </div>
+      <!-- List -->
+      <ul role="list">
+        <li v-for="feature in features" :key="feature">
+          <!-- Icon -->
+          <svg
+            class="w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+          <span>{{ feature }}</span>
+        </li>
+      </ul>
+    </div>
+    <a href="#">Get started</a>
+  </div>
+</template>