Reusable template and behavior

checkout.html

<div class="flex flex-row">
  <div class="flex flex-col">
    <div class="w-96 relative p-8 shadow-md rounded-md m-8">
      <div class="header flex flex-row items-center">
        <span class="uppercase tracking-wider text-gray-600">shipping address</span>
        <span class="flex-grow"></span>
        <button class="p-2 flex items-center justify-center rounded-full hover:bg-gray-200">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
        </button>
      </div>
      <div class="content mt-4 leading-relaxed text-gray-800">
        <p class="">Chi Nguyen</p>
        <p class="">A really really long name-Straße 1</p>
        <p class="">60313 Germany</p>
      </div>
    </div>

    <div class="w-96 relative p-8 shadow-md rounded-md m-8">
      <div class="header flex flex-row items-center">
        <span class="uppercase tracking-wider text-gray-600">shipping address</span>
        <span class="flex-grow"></span>
        <button class="p-2 flex items-center justify-center rounded-full hover:bg-gray-200">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
      </div>
      <div class="content mt-4 leading-relaxed flex flex-col space-y-4">
        <input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="Name" />
        <input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="Street & Number" />
        <input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="ZIP Code" />
        <input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="Country" />
        <div class="flex flex-row">
          <button class="px-4 py-2 bg-gradient-to-r from-sky-500 to-teal-500 text-white rounded-md">Save</button>
        </div>
      </div>
    </div>
  </div>

  <div class="flex flex-col">
    <div class="w-96 relative p-8 shadow-md rounded-md m-8">
      <div class="header flex flex-row items-center">
        <span class="uppercase tracking-wider text-gray-600">payment information</span>
        <span class="flex-grow"></span>
        <button class="p-2 flex items-center justify-center rounded-full hover:bg-gray-200">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
        </button>
      </div>
      <div class="content mt-4 leading-loose text-gray-800">
        <span class="text-gray-600">
          <svg class="w-6 h-6 -mt-1 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
          Bank transfer
        </span>
        <p class="mt-2 text-lg">DE12 1234 5678 9012 3456 78</p>
      </div>
    </div>

    <div class="w-96 relative p-8 shadow-md rounded-md m-8 mt-11">
      <div class="header flex flex-row items-center">
        <span class="uppercase tracking-wider text-gray-600">payment information</span>
        <span class="flex-grow"></span>
        <button class="p-2 flex items-center justify-center rounded-full hover:bg-gray-200">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
      </div>
      <div class="content mt-4 leading-relaxed flex flex-col space-y-4">
        <select class="px-4 py-2 border border-gray-300 rounded-md text-gray-600" type="text">
          <option value>Bank transfer</option>
        </select>
        <input class="px-4 py-2 border border-gray-300 rounded-md" type="text" placeholder="Card information" />
        <div class="flex flex-row">
          <button class="px-4 py-2 bg-gradient-to-r from-sky-500 to-teal-500 text-white rounded-md">Save</button>
        </div>
      </div>
    </div>
  </div>
</div>