From dbcb02d0ea7ea4c3f482df1fd961e4f40b1abeb8 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 19 Jul 2023 16:56:52 +0200
Subject: [PATCH] chore(playground): improve design

---
 playground/app.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/playground/app.vue b/playground/app.vue
index febbc240..5c8f5a2b 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -1,7 +1,23 @@
 <template>
   <UContainer class="min-h-screen flex items-center">
-    <UCard class="flex-1 text-center">
-      Welcome to the playground!
+    <UCard class="flex-1" :ui="{ background: 'bg-gray-50 dark:bg-gray-800/50', ring: 'ring-1 ring-gray-300 dark:ring-gray-700', divide: 'divide-y divide-gray-300 dark:divide-gray-700', header: { base: 'font-bold' } }">
+      <template #header>
+        Welcome to the playground!
+      </template>
+
+      <p class="text-gray-500 dark:text-gray-400">
+        Try your components here!
+      </p>
     </UCard>
   </UContainer>
 </template>
+
+<script setup>
+
+</script>
+
+<style>
+body {
+  @apply antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900;
+}
+</style>