Tailwind Card

Modal Card

modal card

<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 flex flex-col items-center justify-center">
  <!--modal card-->
  <div class="my-3 sm:w-full md:w-1/3 bg-white rounded-lg shadow-lg">
    <div class="px-5 py-4 border-b border-gray-200 flex justify-between">
      <div>
        <i class="fa fa-bell"></i>
        <span class="text-lg text-gray-700 font-bold">标题</span>
      </div>
      <div class="text-gray-500 hover:text-gray-600 transition duration-150 cursor-pointer">
        <i class="fa fa-times"></i>
      </div>
    </div>
    <div class="px-10 py-5 text-gray-500">
      这个人很懒，什么都没有留下...
    </div>
    <div class="px-5 py-4 flex justify-end">
      <button class="px-3 py-2 text-sm text-gray-500 hover:text-gray-600 transition duration-150">确定</button>
    </div>
  </div>
   
</div>

Profile Card

profile card

<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="w-screen h-screen flex items-center justify-center">
  <div class="container mx-auto max-w-xs my-2 overflow-hidden rounded-lg shadow-lg bg-white">
    <div class="relative text-center text-white">
      <img src="http://source.unsplash.com/800x800/?gril" class="w-full"/>
      <div class="absolute w-full" style="bottom:-2rem">
        <div class="mb-10">
          <p class="text-lg font-bold tracking-wide">昵称</p>
          <p class="text-sm">ID：12345678</p>
        </div>
        <button class="w-16 h-16 rounded-full transition ease-in duration-200 focus:outline-none bg-red-500 text-white">
          <i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
    <div class="grid grid-cols-3 gap-6 px-4 pt-12 pb-4 tracking-wide text-center text-gray-800">
      <div><p class="text-lg">170</p><p class="text-sm">好友</p></div>
      <div><p class="text-lg">304</p><p class="text-sm">关注</p></div>
      <div><p class="text-lg">730</p><p class="text-sm">点赞</p></div>
    </div>
  </div>
</div>

Post Card

PostCard

• 使用flex弹性盒子布局后，两端对齐由于内容长度不足，无法实现文字较少时的两端对齐。

<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 p-4 bg-gray-100">
  <div class="mx-4 md:mx-auto my-20 max-w-md md:max-w-2xl w-auto rounded-lg shadow-lg bg-white flex">
    <div class="px-4 py-6 flex items-start">
      <div class="w-16 h-16 mr-4">
        <img src="http://source.unsplash.com/800x800" class="rounded-full shadow object-cover"/>
      </div>
      <div class="w-full">
        <div class="flex items-center justify-start">
          <h2 class="-mt-1 mr-1 text-lg text-gray-900 font-semibold">昵称</h2>
          <small class="text-sm text-gray-700">ID:12345678</small>
        </div>
        <div class="text-sm text-gray-500">2020-06-07</div>
        <div class="mt-3 text-sm text-gray-700">这个人很懒，什么都没有留下...</div>
        <div class="mt-4 flex items-center">
          <div class="mr-4 text-sm text-gray-400 flex items-center">
            <i class="fa fa-share"></i>
            <span class="pl-1">12</span>
          </div>
          <div class="mr-4 text-sm text-gray-400 flex items-center">
            <i class="fa fa-user"></i>
            <span class="pl-1">12</span>
          </div>
          <div class="mr-4 text-sm text-gray-400 flex items-center">
            <i class="fa fa-eye"></i>
            <span class="pl-1">12</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>