Tailwind Avatar

头像

avatar

https://codepen.io/junchow/pen/QWybYrB?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 flex-row justify-center">
    <div class="m-1 mr-2 w-12 h-12 relative flex justify-center items-center rounded-full bg-gray-500 text-xl text-white uppercase">+1</div>
    <div class="m-1 mr-2 w-12 h-12 relative flex justify-center items-center rounded-full bg-orange-500 text-xl text-white uppercase">l</div>
    <div class="m-1 mr-2 w-12 h-12 relative flex justify-center items-center rounded-full bg-red-500 text-xl text-white uppercase">jc</div>
    <div class="m-1 mr-2 w-12 h-12 relative flex justify-center items-center rounded-full bg-green-500 text-xl text-white uppercase">zxl</div>
    <div class="m-1 mr-2 w-12 h-12 relative flex justify-center items-center rounded-full bg-blue-500 text-xl text-white uppercase">
      <i class="fa fa-user"></i>
    </div>
    <div class="m-1 mr-2 w-12 h-12 relative flex justify-center items-center rounded-full bg-gray-500 text-xl text-white">
      <img src="http://source.unsplash.com/100x100/?girl" class="rounded-full">
    </div>
    <div class="m-1 mr-2 w-12 h-12 relative flex justify-center items-center rounded-full bg-gray-500 text-xl text-white">
      <img src="http://source.unsplash.com/100x100/?woman" class="rounded-full">
      <div class="absolute right-0 bottom-0 w-3 h-3 rounded-full bg-red-500"></div>
    </div>
  </div>
</div>

头像组

avatar group

<div class="flex flex-row justify-center">
    <div class="m-1 -ml-2 w-12 h-12 relative flex justify-center items-center rounded-full bg-gray-500 text-xl text-white">
      <img src="http://source.unsplash.com/100x100/?a" class="rounded-full">
    </div>
    <div class="m-1 -ml-6 w-12 h-12 relative flex justify-center items-center rounded-full bg-gray-500 text-xl text-white">
      <img src="http://source.unsplash.com/100x100/?b" class="rounded-full">
    </div>
    <div class="m-1 -ml-6 w-12 h-12 relative flex justify-center items-center rounded-full bg-gray-500 text-xl text-white">
      <img src="http://source.unsplash.com/100x100/?c" class="rounded-full">
    </div>
    <div class="m-1 -ml-6 w-12 h-12 relative flex justify-center items-center rounded-full bg-gray-500 text-xl text-white">
      <img src="http://source.unsplash.com/100x100/?d" class="rounded-full">
    </div>
    <div class="m-1 -ml-6 w-12 h-12 relative flex justify-center items-center rounded-full bg-gray-500 text-xl text-white">
      <img src="http://source.unsplash.com/100x100/?e" class="rounded-full">
    </div>
</div>