Tailwind Comment

comment

<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-4 sm:px-20 flex justify-center">
  <div class="w-full lg:w-6/12 mx-3 md:mx-0 lg:mx-0 border rounded bg-white overflow-hidden">
    <!--header-->
    <div class="w-full p-3 flex justify-between">
      <div class="flex">
        <div class="w-8 h-8 bg-gray-500 rounded-full flex items-center overflow-hidden">
          <img src="http://source.unsplash.com/100x100" />
        </div>
        <span class="ml-2 pt-1 text-sm font-bold">昵称</span>
      </div>
      <div class="px-2 rounded cursor-pointer hover:bg-gray-300">
        <i class="fa fa-ellipsis-h"></i>
      </div>
    </div>
    <!--body-->
    <img src="http://source.unsplash.com/800x800" class="w-full bg-cover"/>
    <!--footer-->
    <div class="px-4 pb-2">
      <div class="flex flex-row items-center justify-between">
        <div class="py-2">
          <i class="fa fa-heart cusor-pointer text-red-500"></i>
          <span class="text-sm text-gray-400 font-medium">100</span>
        </div>
      </div>
      
      <div class="mb-2 pb-2 border-b">
        <div class="mb-2 text-sm">
          <strong class="mr-2">姓名：</strong>
          <span class="text-gray-400">内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本...</span>
        </div>
        <div class="flex flex-row items-center justify-between">
          <span class="text-sm text-gray-500 font-medium cursor-pointer">
            <i class="fa fa-comment"></i> 100
          </span>
          <span class="text-sm text-gray-500 font-medium cursor-pointer">
            <i class="fa fa-user"></i> 100
          </span>
        </div>
      </div>
      
      <div class="mb-2 pb-2">
        <div class="mb-2 text-sm">
          <strong class="mr-2">姓名：</strong>
          <span class="text-gray-400">内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本...</span>
        </div>
        <div class="flex flex-row items-center justify-between">
          <span class="text-sm text-gray-500 font-medium cursor-pointer">
            <i class="fa fa-comment"></i> 100
          </span>
          <span class="text-sm text-gray-500 font-medium cursor-pointer">
            <i class="fa fa-user"></i> 100
          </span>
        </div>
      </div>
      
    </div>
  </div>
</div>

源码地址

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