penguinui is now in the root dir in penguinui-components/

penguinui-components/card/pricing-card.html

@@ -0,0 +1,17 @@
+<article class="group flex rounded-radius w-full max-w-xs flex-col overflow-hidden border-2 border-primary bg-surface-alt p-6 text-on-surface dark:border-primary-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
+    <span class="ml-auto w-fit rounded-radius bg-primary px-2 py-1 text-xs font-medium text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">TOP CHOICE</span>
+    <h3 class="text-xl text-balance md:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong" aria-describedby="planDescription">Premium</h3>
+    <p id="planDescription" class="mt-2 text-pretty text-xs font-medium">Best tools for productivity</p>
+    <span class="mt-8 text-balance text-3xl md:text-4xl font-medium text-on-surface dark:text-on-surface-dark">$8.99</span>
+    <span class="mt-2 text-pretty text-xs font-medium">Per month</span>
+    <h4 class="mt-12 font-medium text-on-surface-strong dark:text-on-surface-dark-strong">Features</h4>
+    <ul class="mt-4 list-inside list-disc space-y-2 text-sm font-medium marker:text-lg marker:text-primary dark:marker:text-primary-dark">
+        <li>Unlimited access to all courses</li>
+        <li>Personalized learning plan</li>
+        <li>Offline viewing</li>
+        <li>No ads</li>
+        <li>High quality video</li>
+        <li>Cancel anytime</li>
+    </ul>
+    <button type="button" class="mt-12 w-full whitespace-nowrap bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark rounded-radius">Start your free trial</button>
+</article>