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

penguinui-components/card/horizontal-card.html

@@ -0,0 +1,22 @@
+<article class="group grid rounded-radius max-w-2xl grid-cols-1 md:grid-cols-8 overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
+    <!-- image -->
+    <div class="col-span-3 overflow-hidden">
+        <img src="https://penguinui.s3.amazonaws.com/component-assets/card-img-4.webp" class="h-52 md:h-full w-full object-cover transition duration-700 ease-out group-hover:scale-105" alt="a men wearing VR goggles" />
+    </div>
+    <!-- body -->
+    <div class="flex flex-col justify-center p-6 col-span-5">
+        <small class="mb-4 font-medium">Artificial Intelligence</small>
+        <h3 class="text-balance text-xl font-bold text-on-surface-strong lg:text-2xl dark:text-on-surface-dark-strong" aria-describedby="articleDescription">AI-Powered VR Goggles Redefine Reality: Augmented Vision for Al</h3>
+        <p id="articleDescription" class="my-4 max-w-lg text-pretty text-sm">
+            Experience the next level of augmented reality with smart
+            goggles integrating cutting-edge AI for seamless interaction
+            with the world around you.
+        </p>
+        <a href="#" class="w-fit font-medium text-primary underline-offset-2 hover:underline focus:underline focus:outline-hidden dark:text-primary-dark">
+           Read full story
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.5" aria-hidden="true" class="inline size-4">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+            </svg>
+        </a>
+    </div>
+</article>