HTML 代码
```html
<div class="container mx-auto p-4 dark:bg-gray-800 bg-gray-200">
<div class="max-w-sm rounded overflow-hidden shadow-lg mx-auto dark:bg-gray-700 bg-white">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2 dark:text-white text-gray-800">Social Post</div>
<p class="dark:text-gray-300 text-gray-700 text-base">
This is a simple social media component card, designed with a retro feel and monochromatic colors, suitable for a blog or content site.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#retro</span>
<span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mr-2 mb-2">#monochromatic</span>
<span class="inline-block bg-gray-300 dark:bg-gray-600 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">#blog</span>
</div>
<div class="flex items-center px-6 py-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Jonathan Reinink">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Jonathan Reinink</p>
<p class="text-gray-600 dark:text-gray-400">Aug 14, 1988</p>
</div>
</div>
</div>
</div>
```