```json
{
"widget"

我们有一个EventList组件，它是一个容器，使用网格布局，12列，间隔24px，内边距为px-4 md:px-8 py-8，背景颜色为白色（但根据要求，白色背景不用加，因为页面默认白色）。
它包含两个EventCard子组件。第一个EventCard详细描述，第二个EventCard通过extends和overrides来复用第一个的结构但覆盖部分内容。

每个EventCard也是一个容器，网格布局12列，间隔24px，有下边距（pb-12）和下边框（1px solid #E5E7EB）。

EventCard内部有四个子组件：
1. DateBox：一个日期盒子，占据1列，内部有三个文本组件（月份、日期、年份），背景蓝色，文字白色，圆角。
2. InfoSection：一个信息区域，占据7列，包含标题、下划线、描述和元信息（两个图标文本）。
3. StatusButton：状态按钮，占据2列，内部有一个按钮，显示状态（未开始/已结束），背景蓝色，文字白色。
4. PreviewImage：预览图片，占据2列，图片宽高比4:3，最大宽度200px，圆角。

第二个EventCard覆盖了状态按钮的文本和样式（已结束时为灰色），以及图片的src。

根据约束条件，我们使用TailwindCSS类来实现，并且注意：
- 颜色：使用Tailwind的色系，比如蓝色我们使用blue-900（接近#004B91）或blue-800，灰色使用gray-200, gray-400等。
- 边框：使用border和border-solid等。
- 布局：使用grid grid-cols-12 gap-6（24px对应gap-6，因为1=4px，6=24px）等。

由于是移动优先，我们使用响应式设计。

步骤：
1. 整体EventList：使用grid，12列，gap-6（24px），padding: px-4 md:px-8 py-8（即左右4，md:左右8，上下8）。
2. 每个EventCard：使用grid grid-cols-12 gap-6，下边框（border-b border-solid border-gray-200），下内边距pb-12（48px）。
3. DateBox：grid-cols-1，使用flex flex-col items-center justify-center，宽高min-w-18（72px）h-18，背景色bg-blue-800，文字颜色text-white，圆角rounded。
内部文本：月份和年份用text-sm（14px），日期用text-3xl（32px）font-bold（700），行高leading-none（1）。
4. InfoSection：grid-cols-7，使用flex flex-col gap-2（8px）。
标题：text-lg（18px）font-bold text-gray-900
下划线：一个div，w-12（48px）h-1（4px）bg-amber-400（接近#FFA726）
描述：text-sm text-gray-600 leading-relaxed（1.6）
元信息：flex items-center gap-4（16px）
图标文本：text-sm text-gray-500，这里图标我们使用Heroicons，但根据约束，我们不能使用外部图标库，所以用占位符（如用span代替图标，或者使用svg，但这里没有提供具体图标，所以用文本代替）
5. StatusButton：grid-cols-2，flex items-center justify-center
按钮：px-4 py-2（8px 16px）bg-blue-800 text-white rounded font-medium text-sm
对于已结束：bg-gray-200 text-gray-500
6. PreviewImage：grid-cols-2，flex justify-end
图片：w-full max-w-50（200px）aspect-[4/3] rounded

注意：由于第二个EventCard覆盖了按钮和图片，我们可以通过条件判断或者动态类来实现。但这里我们有两个事件，所以直接写两个卡片。

图片路径：根据描述，图片是event-poster-1.png和event-poster-2.png，但我们的图片列表中没有，所以使用占位符：https://placehold.co/200x150（4/3比例，200x150）或者用我们提供的展示图？但是用户没有明确要求更新图片，所以保持不变，但这里我们使用占位符。

由于描述中使用了内联样式（如width:48px），我们全部转换为Tailwind类。

根据约束，不能使用自定义样式，所以全部用Tailwind类。

转换：
- 宽度：48px -> w-12（12*4=48）
- 高度：4px -> h-1（4px）
- 日期盒子：min-width:72px -> min-w-18（18*4=72），高度72px->h-18

元信息中的图标：由于没有提供，我们用一个span代替，并加上aria-hidden。

结构：
每个EventCard是一个div，内部使用grid grid-cols-12 gap-6（24px=gap-6）布局。

注意：gridColumn在Tailwind中可以用col-span-*。

具体实现：

第一个事件卡片：
<div class="grid grid-cols-12 gap-6 pb-12 border-b border-solid border-gray-200">
<!-- DateBox -->
<div class="col-span-1 flex flex-col items-center justify-center min-w-18 h-18 bg-blue-800 text-white rounded">
<div class="text-sm font-normal">四月</div>
<div class="text-3xl font-bold leading-none">22</div>
<div class="text-sm font-normal">2025</div>
</div>
<!-- InfoSection -->
<div class="col-span-7 flex flex-col gap-2">
<h3 class="text-lg font-bold text-gray-900">活动预告｜“回顾特区45年·展望深圳2035”暨《深圳2035：中国式现代化的深圳展望》新书首发式</h3>
<div class="w-12 h-1 bg-amber-400"></div>
<p class="text-sm text-gray-600 leading-relaxed">“百川论坛”与“海纳讲座”品牌活动累计邀约嘉宾近百人，其中不乏重量级专家学者和业界先锋力量。曾有 幸邀请到杨洁勉博士、刘晓明大使、潘家华教授、李扬教授、于洪君大使等专家发表主旨演讲，分享真知灼见，为中国 和世界...</p>
<div class="flex items-center gap-4">
<div class="text-sm text-gray-500 flex items-center gap-1">
<span class="w-4 h-4" aria-hidden="true">⏰</span>
<span>2025-04-22 12:00:00</span>
</div>
<div class="text-sm text-gray-500 flex items-center gap-1">
<span class="w-4 h-4" aria-hidden="true">📍</span>
<span>中国·深圳</span>
</div>
</div>
</div>
<!-- StatusButton -->
<div class="col-span-2 flex items-center justify-center">
<button class="px-4 py-2 bg-blue-800 text-white rounded font-medium text-sm">未开始</button>
</div>
<!-- PreviewImage -->
<div class="col-span-2 flex justify-end">
<img src="https://placehold.co/200x150" alt="活动海报" class="w-full max-w-50 aspect-[4/3] rounded">
</div>
</div>

第二个事件卡片：类似，但按钮状态改为“已结束”，按钮样式为bg-gray-200 text-gray-500，图片src不同。

注意：在移动端，我们需要调整布局。根据设计，在移动端可能是堆叠的。但原设计没有给出响应式规则，所以我们按照默认的grid布局，在移动端12列会导致每个子项都占满12列？这样不行。因此，我们考虑在移动端（默认）使用flex-col，在小屏幕以上使用grid。

但是原设计是网格布局，并且指定了每个子组件的列跨度。因此，我们可以在移动端让每个子项都占满宽度（col-span-12），然后在大屏时使用指定的列跨度。

但是原设计没有指定响应式变化，所以我们可以这样处理：
默认（小屏幕）：每个子项都是全宽，按顺序排列。
中等屏幕以上：使用网格布局。

调整：
整个EventList的布局：grid，但是列数在移动端为1列？不，我们使用grid-cols-1，然后在md:grid-cols-12？不对，EventList是每个EventCard占一行，所以EventList应该是每行一个卡片，所以不需要改变列数。EventList的grid是每个卡片一行，所以列数始终为1。而每个EventCard内部使用grid，我们可以在EventCard上设置响应式：默认使用flex flex-col，在md:grid md:grid-cols-12。

具体：
EventCard的布局：默认flex flex-col，然后md:grid md:grid-cols-12 md:gap-6

然后每个子组件在默认时都是全宽（w-full），在md:col-span-*。

这样，在移动端：
DateBox：可能需要调整样式，比如水平居中，或者单独一行。
InfoSection：单独一行。
StatusButton：单独一行，按钮居中。
PreviewImage：单独一行，图片居中（因为flex-end在移动端不合适）。

因此，我们为每个子组件添加：
class="md:col-span-1" 等，并且在移动端使用mb-4等间距。

但是这样改动较大，原设计没有给出移动端设计，所以我们按照原设计在PC上的布局，移动端使用堆叠。

我们重新设计EventCard的响应式：
<div class="border-b border-solid border-gray-200 pb-12">
<div class="flex flex-col md:grid md:grid-cols-12 gap-6">
<!-- 每个子组件都加上class: w-full md:col-span-... -->
<div class="md:col-span-1 ...">...</div>
<div class="md:col-span-7 ...">...</div>
<div class="md:col-span-2 ...">...</div>
<div class="md:col-span-2 ...">...</div>
</div>
</div>

这样在移动端就是垂直排列，在md以上是网格。

另外，图片在移动端可能不需要最大宽度，所以我们可以调整：在移动端图片全宽，在md以上最大宽度200px。

所以PreviewImage中的图片：class="w-full md:max-w-50 aspect-[4/3] rounded"

同样，按钮在移动端可能需要居中，所以我们给StatusButton的div加上flex justify-center（在移动端）和md:justify-center（原本就居中）。

日期盒子在移动端可能需要调整，我们让它居中，所以DateBox的div加上：self-center（在flex容器中居中）或者用mx-auto。

由于移动端是flex-col，所以DateBox可以用mx-auto来水平居中。

具体实现：

第一个EventCard：
<div class="pb-12 border-b border-solid border-gray-200">
<div class="flex flex-col gap-6 md:grid md:grid-cols-12 md:gap-6">
<!-- DateBox -->
<div class="flex flex-col items-center justify-center min-w-18 h-18 bg-blue-800 text-white rounded mx-auto md:mx-0 md:col-span-1">
...
</div>

<!-- InfoSection -->
<div class="md:col-span-7">
...
</div>

<!-- StatusButton -->
<div class="flex justify-center md:col-span-2">
...
</div>

<!-- PreviewImage -->
<div class="flex justify-center md:justify-end md:col-span-2">
<img ... class="w-full max-w-full md:max-w-50 aspect-[4/3] rounded">
</div>
</div>
</div>

注意：在移动端，图片和按钮都居中，在md以上，图片右对齐。

第二个EventCard类似，只是按钮文字和样式以及图片src不同。

最后，整个EventList：
<div class="px-4 md:px-8 py-8 grid grid-cols-1 gap-8">
两个EventCard
</div>

注意：原设计是gap-24px，我们使用gap-8（32px）？因为24px是6，但我们的gap-6是24px。在EventList中，我们使用gap-8（32px）来分隔两个卡片，因为原设计没有指定卡片之间的间隔，但每个卡片有下边框和下内边距，所以我们可以用gap-8来增加垂直间距。

但是原设计每个卡片已经有下边距（pb-12）和下边框，所以两个卡片之间的间隔就是pb-12（48px）？所以EventList的gap可以设为0。

我们按照原设计，EventList的gap设置为0，每个卡片通过下边框和下内边距来分隔。

因此，EventList的grid gap设为0。

总结代码结构：

<div class="px-4 md:px-8 py-8 grid grid-cols-1 gap-0">
<!-- 第一个卡片 -->
<div class="pb-12 border-b border-solid border-gray-200">
<div class="flex flex-col gap-6 md:grid md:grid-cols-12 md:gap-6">
... 四个部分 ...
</div>
</div>
<!-- 第二个卡片 -->
<div class="pb-12 border-b border-solid border-gray-200">
... 同样结构，但按钮和图片不同 ...
</div>
</div>

第二个卡片中，按钮的class为：px-4 py-2 bg-gray-200 text-gray-500 rounded font-medium text-sm，内容为“已结束”。

图片src改为：https://placehold.co/200x150?text=海报2

注意：我们使用了占位图片，实际项目中应替换。

另外，下划线的宽度48px，我们使用w-12（48px）。

由于原设计中有行高1，我们使用leading-none。

元信息中的图标，我们用span模拟，使用文本表情，并设置aria-hidden，同时为了可访问性，我们可以在外面用span.sr-only提供辅助文本，但这里没有，所以先这样。

根据约束，我们使用Tailwind的配置，注意检查类名是否在safelist中。

开始写代码：