左边内容 右边图片的Tailwind CSS模板

 1<script src="https://cdn.tailwindcss.com"></script>
 2{{/*  Left content Right image Section   */}}
 3<div class="bg-transparent px-0">
 4    <div class="bg-gradient-to-r from-blue-700 to-blue-500 max-w-6xl mx-auto min-h-[475px] rounded-3xl p-6 text-white flex flex-col justify-center font-[sans-serif] overflow-hidden">
 5      <div class="grid md:grid-cols-2 justify-center items-center max-md:text-center gap-8 h-full">
 6        <div class="max-w-md mx-auto">
 7          <h2 class="text-4xl md:text-5xl font-extrabold mb-6 md:!leading-[55px] text-white">清晨的玫瑰花</h2>
 8          <p class="text-base">这是一朵开在清晨的玫瑰花,开在最美好的季节</p>
 9          <div class="mt-10">
10            <button type="button"
11              class="px-8 py-2 text-base tracking-wider font-semibold outline-none border border-white bg-white text-blue-500 hover:bg-transparent hover:text-white transition-all duration-300">试一试</button>
12          </div>
13        </div>
14        <div class="md:text-right">
15          <img src="https://readymadeui.com/bg-image.webp" alt="" class="object-cover" />
16        </div>
17      </div>
18    </div>
19  </div>
20