with time

app/page.tsx

@@ -7,7 +7,7 @@ export default async function Page() {
   const posts = await getPosts();
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 pt-6">
       <Posts posts={posts} />
     </div>
   );

app/posts.tsx

@@ -12,14 +12,15 @@ const Posts: FC<PostProps> = ({ posts }) => {
   return (
     <>
       {posts.map((p) => (
-        <div className="space-y-2 text-white">
-          <p className="font-bold">{p.author.name}</p>
-          <p>{p.title}</p>
-          <div>
+        <div className="space-y-2 rounded-md border border-solid border-gray-700 p-4 text-white">
+          <p className="font-bold">@{p.author.name}</p>
+          <p className="italic">{p.title}</p>
+          <div className="markdown">
             {p.message && (
               <ReactMarkdown children={p.message} remarkPlugins={[remarkGfm]} />
             )}
           </div>
+          <small>{new Date(p.time * 1000).toLocaleString()}</small>
         </div>
       ))}
     </>

styles/globals.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.markdown {
+  @apply space-y-2;
+}
+
+.markdown ul {
+  @apply pl-4;
+}
+
+.markdown li {
+  @apply list-disc;
+}