Сделать анимированные вкладки в Tailwind CSS? ⇐ CSS

[Anonymous]

Я хочу создать анимированную вкладку, например:


Я использую React с Tailwind. Это мой код:

Код: Выделить всё

import React from 'react'
import clsx from 'clsx'

export const Modal = () => {
const [theme, setTheme] = React.useState('light')
return (


 {
setTheme('light')
}}
>
Light


className={clsx('flex-1 py-1 my-2 ml-2 text-center rounded-md', {
'bg-white': theme === 'dark',
})}
>
 {
setTheme('dark')
}}
>
Dark


className={clsx('flex-1 py-1 my-2 mr-2 text-center rounded-md', {
'bg-white': theme === 'system',
})}
>
 {
setTheme('system')
}}
>
System



)
}

Но это выглядит так:
[img]https://i.stack.imgur .com/RSadk.gif[/img]

Поскольку я использую Translate-x-10, когда тема не светлая, текст тоже перемещается.
Мне бы хотелось сделать пользовательский интерфейс точно таким же, как приведенный выше, но при этом использовать кнопки для реальных вкладок.
Минимальный код и песочница → https:// codeandbox.io/s/mobx-theme-change-n1nvg?file=/src/App.tsx
Как это сделать?

Подробнее здесь: https://stackoverflow.com/questions/662 ... ilwind-css