Card with Illustrations - Tailwind Component

<div class="min-h-screen w-full">
  <div class="max-w-screen-md mx-auto px-10 pt-20">
    <div class="bg-white w-full md:h-64 rounded-md shadow-md flex flex-wrap flex-col-reverse md:flex-col md:py-2 border-4 border-l-red-500">
      <div class="w-full md:w-1/2 p-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-red-600" viewBox="0 0 20 20"
          fill="currentColor">
          <path fill-rule="evenodd"
            d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
            clip-rule="evenodd" />
        </svg>
        <h3 class="text-4xl font-bold">Fastest <span class="text-red-600">Delivery</span> & Easy <span class="text-red-600">Pickup</span></h3>
        <p class="">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus velit nemo quam.</p>
          <button class="px-2 py-2 bg-red-200 text-red-700 mt-2 mb-2 text-base font-medium rounded shadow hover:bg-red-500 hover:text-white">Learn More</button>
      </div>
      <div class="w-full md:w-1/2 p-4 md:p-0">
        <img src="https://isometric.online/wp-content/uploads/2019/07/Delivery_app_SVG.svg" alt="Delivery App"
          class="w-64 mx-auto ">
      </div>
    </div>
  </div>
</div>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

  body {
    font-family: 'Tajawal', Arial;
  }
</style>