<section>
<div class="flex justify-center p-12 mx-auto">
<span class="inline-flex isolate">
<button
class="flex items-center justify-center focus:z-10 transition-all duration-300 focus:ring-2 focus:ring-offset-1 focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 focus:ring-offset-white h-10 px-6 py-3 text-base font-medium rounded-l-md rounded-l-md rounded-l-lg rounded-l-lg rounded-l-lg rounded-l-lg"
>
Top
</button>
<button
class="flex items-center justify-center focus:z-10 transition-all duration-300 focus:ring-2 focus:ring-offset-1 focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 focus:ring-offset-white h-10 px-6 py-3 text-base font-medium rounded-none -ml-px rounded-none -ml-px rounded-none -ml-px rounded-none -ml-px rounded-none -ml-px rounded-none -ml-px"
>
Center
</button>
<button
class="flex items-center justify-center focus:z-10 transition-all duration-300 focus:ring-2 focus:ring-offset-1 focus:outline-none text-base-500 bg-white hover:text-accent-500 ring-1 ring-base-200 focus:ring-accent-500 focus:ring-offset-white h-10 px-6 py-3 text-base font-medium rounded-r-md -ml-px rounded-r-lg -ml-px rounded-r-md -ml-px rounded-r-lg -ml-px rounded-r-lg -ml-px rounded-r-lg -ml-px"
>
Middle
</button>
</span>
</div>
</section>
