Tailwind FAB

FAB全称Floating Action Button浮动的动作按钮

FAB

尺寸	样式	属性
small	w-10 h-10	-
medium	w-12 h-12	-
large	w-16 h-16	-

禁用效果

样式	属性
cursor-not-allowed	-
opacity-50	-

<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 flex flex-row items-center justify-between">
  <button class="p-0 w-10 h-10 rounded-full bg-red-600 shadow text-white mouse transition ease-in duration-200 focus:outline-none active:bg-red-700 active:shadow-lg">
    <i class="fa fa-plus"></i>
  </button>
  <button class="p-0 w-12 h-12 rounded-full bg-red-600 shadow text-white mouse transition ease-in duration-200 focus:outline-none active:bg-red-700 active:shadow-lg">
    <i class="fa fa-plus"></i>
  </button>
  <button class="p-0 w-16 h-16 rounded-full bg-red-600 shadow text-white mouse transition ease-in duration-200 focus:outline-none active:bg-red-700 active:shadow-lg">
    <i class="fa fa-plus"></i>
  </button>
  <button class="p-0 w-16 h-16 rounded-full bg-red-600 opacity-50 shadow text-white mouse cursor-not-allowed transition ease-in duration-200 focus:outline-none active:bg-red-700 active:shadow-lg">
    <i class="fa fa-plus"></i>
  </button>
</div>