Tailwind Toggle

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

切换

toggle

<div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
  <input type="checkbox" id="toggle" class="absolute block w-6 h-6 border-4 rounded-full bg-white cursor-pointer appearance-none toggle-checkbox">
  <label for="toggle" class="block h-6 rounded-full bg-gray-300 cursor-pointer overflow-hidden toggle-label"></label>
</div>

切换效果CSS实现

.toggle-checkbox:checked{
  @applay:right-0 border-green-400;
  right:0;
  border-color:#68D391;
}
.toggle-checkbox:checked + .toggle-label{
  @apply:bg-green-400;
  background-color:#68D391;
}

切换

toggle

<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-flex rounded-full border-1 border-gray-300 bg-gray-200 shadow-md leading-none text-sm">
    <button class="inline-flex items-center px-4 py-2 bg-white rounded-full text-blue-400 transition-colors duration-300 ease-in focus:outline-none focus:text-blue-400 hover:text-blue-400">
      <i class="fa fa-th mr-2"></i>
      <span>表格</span>
    </button>
    <button class="inline-flex items-center px-4 py-2 rounded-r-full text-gray-500 transition-colors duration-300 ease-in focus:outline-none focus:text-blue-400 hover:text-blue-400">
      <i class="fa fa-list mr-2"></i>
      <span>列表</span>
    </button>
  </div>
</div>