HTML 代码
<div class="container mx-auto p-4 dark:bg-gray-900 bg-white text-gray-800 dark:text-gray-200 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold mb-4 text-center">Blog Post Title</h1>
<img src="https://picsum.photos/seed/unsplash/800/400" alt="Blog Post Image" class="w-full h-auto rounded-md mb-4">
<div class="prose dark:prose-invert max-w-none">
<p>This is an example of a blog post content paragraph within the container. It demonstrates a simple layout for reading and content consumption in dark mode.</p>
<p>The container is designed to be responsive and uses Tailwind CSS classes for styling, including dark mode support with the <code class="language-text">dark:</code> prefix.</p>
<p>Grayscale colors are used for a clean and minimalist look.</p>
</div>
</div>相关组件
Material Design 电子商务容器
一个响应式电子商务容器组件，具有产品网格、购物车摘要和深色主题支持，使用 Material Design 原则和大地色调配色方案设计。它具有多个交互式元素，包括带有图像、标题、价格和“添加到购物车”按钮的产品卡，以及随添加商品而更新的粘性购物车摘要。布局会针对不同的屏幕大小进行调整，并且所有元素都具有使用 Tailwind CSS dark： 前缀定义的深色模式样式。