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>
待完善
- 自适应状态下竖屏显示
