refactor: use Tailwind CSS prose styles

src/pages/daily.mdx

@@ -16,19 +16,22 @@ export const testimonials = [
   },
   {
     name: "Stephen Mulvihill",
-    text: 'I like the "$ git log -S" and "$ git log --grep" commands, will definitely be using these, thanks!',
+    text: '<p>I like the "$ git log -S" and "$ git log --grep" commands, will definitely be using these, thanks!</p>',
     image: "stephen-mulvihill.jpg",
   },
   {
     name: "Marcos Duran",
-    text: "<p>    I am a big fan of your git approaches. I especially remember pairing with you and watching how many commands you run to solve many problems and how fast you were. It's a skill I believe not many have, particularly those who are used to working with a GUI like me, and personally I think it is quite valuable.</p>",
+    text: "<p>I am a big fan of your git approaches. I especially remember pairing with you and watching how many commands you run to solve many problems and how fast you were. It's a skill I believe not many have, particularly those who are used to working with a GUI like me, and personally I think it is quite valuable.</p>",
     image: "marcos-duran.jpg",
   },
 ];
 
 export const sortedTestimonials = _.reverse(testimonials);
 
-A daily newsletter on software development, DevOps, community, and open-source.
+<p>
+  A daily newsletter on software development, DevOps, community, and
+  open-source.
+</p>
 
 <div class="space-y-12">
   <div class="space-y-20">
@@ -42,11 +45,11 @@ A daily newsletter on software development, DevOps, community, and open-source.
           {testimonials.map(testimonial => (
             <article class="flex space-x-10">
               <div>
-                <blockquote class="m-0">
-                  <Markdown set:html={testimonial.text} />
-                </blockquote>
+                <Markdown>
+                  <blockquote class="m-0"set:html={testimonial.text} />
 
-                <figcaption class="mt-6">{testimonial.name}</figcaption>
+                  <figcaption class="mt-6">{testimonial.name}</figcaption>
+                </Markdown>
               </div>
 
               <div class="hidden flex-shrink-0 sm:block">

src/pages/talks/[slug].astro

@@ -24,7 +24,7 @@ const { events, speakerdeck, title, video } = Astro.props.talk.data;
 ---
 
 <Layout title={title}>
-  <div class="space-y-6">
+  <div class="space-y-8">
     <Markdown>
       <Content />
     </Markdown>

src/pages/talks/index.astro

@@ -2,6 +2,7 @@
 import ListingPage from "~/components/ListingPage.astro";
 import _ from "lodash";
 import { getCollection } from "astro:content";
+import Markdown from "~/components/Markdown.astro";
 
 const talks = await getCollection("talk");
 
@@ -28,9 +29,11 @@ const sortedTalks = talks
 ---
 
 <ListingPage items={sortedTalks} title="Talks and workshops">
-  <p slot="intro">
-    Starting with my first talk in September 2012, I have given {talkCount} presentations
-    and workshops at various conferences and meetups, in-person and remotely, on
-    topics including PHP, Drupal, automated testing, Git, CSS, and systems administration.
-  </p>
+  <Markdown>
+    <p slot="intro">
+      Starting with my first talk in September 2012, I have given {talkCount} presentations
+      and workshops at various conferences and meetups, in-person and remotely, on
+      topics including PHP, Drupal, automated testing, Git, CSS, and systems administration.
+    </p>
+  </Markdown>
 </ListingPage>