<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>