input counter

counter

<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 bg-gray-100">
  <div class="relative w-full h-10 border rounded-lg bg-white flex flex-row divide-x">
    <button class="w-20 h-full outline-none cursor-pointer text-gray-600 hover:text-gray-700 hover:bg-gray-100">
      <span class="m-autotext-2xl font-thin">-</span>
    </button>
    <input type="number" value="0" class="w-full h-full outline-none text-center font-semibold text-md focus:text-black md:text-basecursor-default">
    <button class="w-20 h-full outline-none cursor-pointer text-gray-600 hover:text-gray-700 hover:bg-gray-100">
      <span class="m-autotext-2xl font-thin">+</span>
    </button>
  </div>
</div>

button counter

<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">
  <button class="relative mr-4 p-6 rounded bg-blue-500 text-white text-2xl font-bold overflow-visible">
    button
    <div class="absolute top-0 right-0 -mt-4 -mr-4 px-4 py-1 bg-red-500 rounded-full">1</div>
  </button>
  <button class="relative mr-4 p-6 rounded bg-blue-500 text-white text-2xl font-bold overflow-visible">
    button
    <div class="absolute top-0 right-0 -mt-4 -mr-4 px-4 py-1 bg-red-500 rounded-full">100</div>
  </button>
  <button class="relative mr-4 p-6 rounded bg-green-500 text-white text-2xl font-bold overflow-visible">
    button
    <div class="absolute top-0 right-0 -mt-4 -mr-4 px-4 py-1 bg-red-500 rounded-full">1</div>
  </button>
  <button class="relative mr-4 p-6 rounded bg-green-500 text-white text-2xl font-bold overflow-visible">
    button
    <div class="absolute top-0 right-0 -mt-4 -mr-4 px-4 py-1 bg-red-500 rounded-full">100</div>
  </button>
</div>

page

<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-4 bg-gray-200">
  <ul class="my-2 pl-0 list-none rounded flex flex-row text-gray-400">
    <li class="relative block px-3 py-2 border border-gray-300 border-r-0 rounded-l bg-white leading-tight hover:bg-gray-200">
      <a href=""><</a>
    </li>
    <li class="relative block px-3 py-2 border border-gray-300 border-r-0 leading-tight bg-white hover:bg-gray-200">
      <a href="">1</a>
    </li>
    <li class="relative block px-3 py-2 border border-gray-300 border-r-0 leading-tight bg-white hover:bg-gray-200">
      <a href="">...</a>
    </li>
    <li class="relative block px-3 py-2 border border-gray-300 border-r-0 leading-tight bg-white hover:bg-gray-200">
      <a href="">10</a>
    </li>
    <li class="relative block px-3 py-2 border border-gray-300 rounded-r bg-white leading-tight hover:bg-gray-200">
      <a href="">></a>
    </li>
  </ul>
</div>

avatar with name

<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="inline-block m-2 pr-6 bg-gray-300 rounded-full">
    <div class="flex flex-row items-center justify-center">
      <img src="http://source.unsplash.com/100x100" class="h-16 rounded-full">
      <div class="px-4 text-gray-600">昵称</div>
    </div>
  </div>
  <div class="inline-block m-2 pr-6 bg-gray-300 rounded-full">
    <div class="flex flex-row items-center justify-center">
      <img src="https://unsplash.it/100/100/?girl" class="h-16 rounded-full">
      <div class="px-4 text-gray-600">昵称昵称</div>
    </div>
  </div>
  <div class="inline-block m-2 pr-6 bg-gray-300 rounded-full">
    <div class="flex flex-row items-center justify-center">
      <img src="https://picsum.photos/100/100/?man" class="h-16 rounded-full">
      <div class="px-4 text-gray-600">昵称昵称昵称</div>
    </div>
  </div>
</div>