From 2e87077ff665e29527453742b53ddfccca15acff Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Thu, 23 Nov 2023 21:31:04 +0100
Subject: [PATCH] feat(site): add link to codepen

---
 site/src/components/call-to-action.html | 40 ++++++++++++++++---------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/site/src/components/call-to-action.html b/site/src/components/call-to-action.html
index 4626820..bc3c1ba 100644
--- a/site/src/components/call-to-action.html
+++ b/site/src/components/call-to-action.html
@@ -1,18 +1,30 @@
-<div style="
-    padding: 1em;
-    margin: 1em 0;
-    text-align: center;
-    width: 100%;
-">
-  <a
-    style="
-        background-color: var(--color-primary);
-        color: white;
-        padding: 0.75em;
-        border-radius: 5px;
-        text-decoration: none;
-    "
+<div class="call-to-action">
+  <a id="primary"
     href="https://www.npmjs.com/package/web-component-base#readme">
     Learn More
   </a>
+  <a href="https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010">Playground</a>
 </div>
+
+<style>
+.call-to-action {
+  display: flex;
+  gap: 1em;
+  justify-content: center;
+  padding: 1em;
+  margin: 1em 0;
+  width: 100%;
+
+  & a {
+    border: 1px solid var(--color-primary);
+    padding: 0.75em;
+    border-radius: 5px;
+
+    &#primary {
+        background-color: var(--color-primary);
+        color: white;
+        text-decoration: none;
+    }
+  }
+}
+</style>
\ No newline at end of file