Tailwind Steps

https://codepen.io/junchow/pen/pogJxWx?editors=1000

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="container mx-auto my-12 p-12 bg-gray-100">
  <div class="flex items-center sm:flex-col md:flex-row">
    
    <div class="px-6 sm:w-full md:w-1/3">
      <div class="border border-gray-400 rounded-lg bg-gray-300 flex items-center justify-center">
        <div class="w-1/3 bg-transparent flex items-center justify-center">
          <i class="fa fa-user"></i>
        </div>
        <div class="w-2/3 p-4 flex flex-col items-center justify-center bg-gray-200">
          <h2 class="text-sm font-bold">1.个人资料</h2>
          <p class="text-xs text-gray-600">请填写个人信息</p>
        </div>
      </div>
    </div>
    
    <div class="flex-1 flex items-center justify-center">
      <i class="fa fa-arrow-right fa-2x"></i>
    </div>
    
    <div class="px-6 sm:w-full md:w-1/3">
      <div class="border border-gray-400 rounded-lg bg-gray-300 flex items-center justify-center">
        <div class="w-1/3 bg-transparent flex items-center justify-center">
          <i class="fa fa-users"></i>
        </div>
        <div class="w-2/3 p-4 flex flex-col items-center justify-center bg-gray-200">
          <h2 class="text-sm font-bold">2.群组信息</h2>
          <p class="text-xs text-gray-600">请完善群组资料信息</p>
        </div>
      </div>
    </div>
    
    <div class="flex-1 flex items-center justify-center">
      <i class="fa fa-arrow-right fa-2x"></i>
    </div>
    
    <div class="px-6 sm:w-full md:w-1/3">
      <div class="border border-gray-400 rounded-lg bg-gray-300 flex items-center justify-center">
        <div class="w-1/3 bg-transparent flex items-center justify-center">
          <i class="fa fa-check"></i>
        </div>
        <div class="w-2/3 p-4 flex flex-col items-center justify-center bg-gray-200">
          <h2 class="text-sm font-bold">3.上传附件</h2>
          <p class="text-xs text-gray-600">请上传附件文件</p>
        </div>
      </div>
    </div>
    
  </div>
</div>

待完善

• 自适应状态下竖屏显示