如何使用HTML和Tailwind CSS实现目标布局？现有代码无法达到预期效果

我懂你现在的困扰——明明搭好了布局结构，但就是没法得到想要的错落卡片效果对吧？咱们先梳理下你现有代码里的小问题，再给出调整后的完整方案，帮你搞定这个布局。

首先，先指出几个你代码里的小疏漏：

1. 你用了text:base这种错误的语法，Tailwind的类名是用短横线连接的，应该是text-base
2. 你用到的bg-olive-green、text-bluish-green这些是自定义颜色，Tailwind默认没有，需要在配置文件里定义才能生效
3. 部分定位和间距的细节没处理好，导致布局在不同屏幕下的表现不一致

下面是调整后的完整代码，我保留了你原本的设计思路，优化了布局细节和兼容性：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script>
// 这里配置自定义颜色，不然你的自定义色类不会生效
tailwind.config = {
  theme: {
    extend: {
      colors: {
        'olive-green': '#808F28', // 示例色值，你可以换成自己需要的
        'bluish-green': '#E8F5E9',
        'orange-vibrant': '#FF7043',
        'light-gray': '#666666',
      },
    }
  }
}
</script>

<div class="flex flex-col md:flex-row gap-6 md:gap-12 justify-center items-center md:items-stretch min-h-[400px] p-4">
  <!-- 使命卡片 -->
  <div class="relative max-w-sm w-full self-start md:self-auto">
    <div class="absolute -top-8 -left-2 z-0">
      <span class="bg-olive-green text-bluish-green text-base md:text-3xl font-bold px-4 pt-2 pb-6">
        Missão
      </span>
    </div>
    <div class="relative z-10 border-2 border-orange-vibrant rounded-[40px] p-8">
      <p class="text-lg italic text-light-gray">
        Desenvolver formulações bioativas personalizadas que promovem produtos mais saudáveis, seguros e alinhados às demandas atuais
      </p>
    </div>
  </div>

  <!-- 愿景卡片 -->
  <div class="relative max-w-sm w-full md:-mt-16 self-center md:self-auto">
    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 z-0">
      <span class="bg-green-700 text-white font-bold px-4 py-1 rounded-tl-[12px] rounded-tr-[12px]">
        Visão
      </span>
    </div>
    <div class="relative z-10 border-2 border-orange-vibrant rounded-[30px] p-6 pb-10">
      <p class="text-sm italic text-center">
        Ser referência em soluções naturais e sustentáveis para a conservação alimentar no Brasil
      </p>
    </div>
  </div>

  <!-- 价值观卡片 -->
  <div class="relative max-w-sm w-full self-start md:self-auto">
    <div class="absolute top-0 left-0 z-0">
      <span class="bg-green-700 text-white font-bold px-4 py-1 rounded-tl-[12px] rounded-br-[12px]">
        Valores
      </span>
    </div>
    <div class="relative z-10 border-2 border-orange-vibrant rounded-[30px] p-6 pt-10">
      <p class="text-sm italic leading-relaxed">
        Inovação responsável;<br />
        Transparência;<br />
        Atuação colaborativa e inclusiva;<br />
        Segurança alimentar e Sustentabilidade
      </p>
    </div>
  </div>
</div>

关键调整说明： #

• 修复语法错误：把错误的text:base改成了text-base，确保字体大小样式生效
• 添加自定义颜色配置：通过tailwind.config定义了你用到的自定义颜色，不然这些颜色类会失效
• 优化垂直错落效果：调整了愿景卡片的md:-mt-16，在桌面端让它向上偏移，形成错落感；移动端则保持居中对齐
• 统一对齐逻辑：把桌面端的items-stretch配合md:self-auto，让卡片高度自适应内容，同时保持错落的位置关系
• 增强响应式兼容性：添加了p-4内边距和min-h-[400px]确保在小屏幕下布局不会挤在一起

你可以根据自己的实际视觉需求，调整颜色值、偏移量（比如-mt-16）和圆角大小，这样就能得到你想要的目标布局啦！

内容来源于stack exchange