Tailwind List

普通列表

list

• 使用纵向分割线和弹性盒子实现

<div class="flex flex-col mb-8 divide-y text-base text-gray-800 w-full border">
    <div class="py-3 px-6">
      <div class="flex items-center justify-between">
        <h4 class="font-bold">主题文本</h4>
        <i class="fa fa-angle-down text-gray-500"></i>
      </div>
      <div class="mt-3 text-gray-600">详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容</div>
    </div>
    <div class="py-3 px-6">
      <div class="flex items-center justify-between">
        <h4 class="font-bold">主题文本</h4>
        <i class="fa fa-angle-down text-gray-500"></i>
      </div>
      <div class="mt-3 text-gray-600 hidden">详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容</div>
    </div>
</div>

卡片列表

card list

<div class="container mx-auto w-full flex items-center justify-center">
  <div class="p-4 flex flex-col">
    <!--card-->
    <div class="mb-2 flex flex-row">
      <div class="p-4 select-none cursor-pointer border border-gray-200 rounded-md transition duration-500 ease-in-out transform hover:-translate-y-1 hover:shadow-lg flex-1 flex items-center">
        <div class="mr-4 w-10 h-10 rounded-md flex flex-col justify-center items-center">
          <i class="fa fa-user"></i>
        </div>
        <div class="mr-16 pl-1 flex-1">
          <div class="font-medium">标题</div>
          <div class="text-sm text-gray-600">副标题</div>
        </div>
        <div class="text-xs text-gray-800">日期时间</div>
      </div>
    </div>
  </div>
</div>