<h2 class="c-tail flex flex-row items-center bg-gray-900 pl-6 pt-3 pb-3 pr-3 mb-8 border-b-2 font-semibold text-3xl text-white">ボタン</h2>
<div class="px-8">
  <h3 class="c-tail border border-black pl-4 pt-2 pb-2 pr-2 mb-8 mt-12 font-bold text-3xl">基本ボタン</h3>
  <!-- 基本形 ---------------------------->
  <h4 class="c-tail pl-4 py-2 text-xl font-bold relative mb-8 mt-12">基本形</h4>
  <button type="button" class="bg-blue-600 text-white rounded hover:bg-blue-500 px-4 py-2 focus:outline-none">Primary</button>
  <button type="button" class="bg-gray-600 text-gray-100 rounded hover:bg-gray-500 px-4 py-2 focus:outline-none">Secondary</button>
  <button type="button" class="bg-green-500 text-gray-100 rounded hover:bg-green-400 px-4 py-2 focus:outline-none">Success</button>
  <button type="button" class="bg-red-500 text-gray-200 rounded hover:bg-red-400 px-4 py-2 focus:outline-none">Danger</button>
  <button type="button" class="bg-yellow-400 text-gray-800 rounded hover:bg-yellow-300 px-4 py-2 focus:outline-none">Warning</button>
  <button type="button" class="bg-indigo-500 text-gray-100 rounded hover:bg-indigo-400 px-4 py-2 focus:outline-none">Info</button>
  <button type="button" class="bg-gray-300 text-gray-900 rounded hover:bg-gray-200 px-4 py-2 focus:outline-none">Light</button>
  <button type="button" class="bg-gray-900 text-gray-100 rounded hover:bg-gray-800 px-4 py-2 focus:outline-none">Dark</button>
  <!-- transition付き ---------------------------->
  <h4 class="c-tail pl-4 py-2 text-xl font-bold relative mb-8 mt-12">transition付き</h4>
  <button type="button" class="transition duration-500 bg-blue-600 text-gray-200 rounded hover:bg-blue-500 px-4 py-2 focus:outline-none">Primary</button>
  <button type="button" class="transition duration-500 bg-gray-600 text-gray-100 rounded hover:bg-gray-500 px-4 py-2 focus:outline-none">Secondary</button>
  <button type="button" class="transition duration-500 bg-green-500 text-gray-100 rounded hover:bg-green-400 px-4 py-2 focus:outline-none">Success</button>
  <button type="button" class="transition duration-500 bg-red-500 text-gray-200 rounded hover:bg-red-400 px-4 py-2 focus:outline-none">Danger</button>
  <button type="button" class="bg-yellow-400 text-gray-800 rounded hover:bg-yellow-300 px-4 py-2 focus:outline-none">Warning</button>
  <button type="button" class="transition duration-500 bg-indigo-500 text-gray-100 rounded hover:bg-indigo-400 px-4 py-2 focus:outline-none">Info</button>
  <button type="button" class="transition duration-500 bg-gray-300 text-gray-900 rounded hover:bg-gray-200 px-4 py-2 focus:outline-none">Light</button>
  <button type="button" class="transition duration-500 bg-gray-900 text-gray-100 rounded hover:bg-gray-800 px-4 py-2 focus:outline-none">Dark</button>
  <!-- ここまで ---------------------------->
</div>

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.1/tailwind.min.css
  2. https://codepen.io/kote2kote/pen/NWNwXar.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
  2. https://kit.fontawesome.com/7432b48064.js
  3. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  4. https://codepen.io/kote2kote/pen/BapNRJZ.js