Page Number

<div class="flex flex-row gap-8 border border-dashed border-violet-700 rounded-lg w-fit">
    <!-- Audio -->
    <div class="flex flex-col gap-6 p-2">
        <!-- Normal -->
        <div class="flex items-center justify-center font-semibold text-audio-700/60">1</div>
        <!-- hover -->
        <div class="flex items-center justify-center font-semibold text-audio-700/80">1</div>
        <!-- active -->
        <div class="flex items-center justify-center font-semibold text-audio-700/80 pb-0.5 px-2 border-b border-audio-700/80">1</div>
    </div>
    <!-- Optique -->
    <div class="flex flex-col gap-6 p-2">
        <!-- Normal -->
        <div class="flex items-center justify-center font-semibold text-black/60">1</div>
        <!-- hover -->
        <div class="flex items-center justify-center font-semibold text-black/80">1</div>
        <!-- active -->
        <div class="flex items-center justify-center font-semibold text-black/80 pb-0.5 px-2 border-b border-black/80">1</div>
    </div>
    <div class="bg-[#393939] rounded-r-lg">
        <div class="flex flex-col gap-6 p-2">
            <!-- Normal -->
            <div class="flex items-center justify-center font-semibold text-white/60">1</div>
            <!-- hover -->
            <div class="flex items-center justify-center font-semibold text-white/80">1</div>
            <!-- active -->
            <div class="flex items-center justify-center font-semibold text-white/80 pb-0.5 px-2 border-b border-white/80">1</div>
        </div>
    </div>
</div>