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>