Perform ring animation using only Tailwind?

[deadcoder0904]

I want to perform Ring Animation like:

Is this possible with only Tailwind? If so, how do I do it?

[deadcoder0904]

It is actually possible with only Tailwind:

import React from 'react'
import { observer } from 'mobx-react'
import clsx from 'clsx'

import { Divider, ShiftBy } from '@/components/ui/index'
import { useFrameItStore } from '@/store/index'

import type { SidebarTheme as SidebarThemeType, AppTheme as AppThemeType } from '@/types/index'

export const SidebarTheme = observer(() => {
	const {
		theme: { sidebar },
		updateTheme,
	} = useFrameItStore()

	const setSidebarTheme = (sidebar: SidebarThemeType) => {
		updateTheme({ sidebar })
	}

	return (
		<>
			<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
				<ShiftBy x={-4} y={0}>
					<div className="mt-4">
						<h4 className="text-xl font-bold text-blue-gray-800">Color</h4>
						<p className="text-base font-normal text-blue-gray-600">
							Set the theme across the sidebar
						</p>
					</div>
				</ShiftBy>
			</div>

			<Divider />

			<div className="relative mx-2 mt-2 rounded-md">
				<div
					id="ring-slider"
					className={clsx(
						'absolute inset-y-0 w-10 h-10 rounded-full transition-transform transform',
						{
							'ring-4 ring-offset-2 ring-red-500 translate-x-0': sidebar === 'red',
							'ring-4 ring-offset-2 ring-blue-400 translate-x-170': sidebar === 'blue',
							'ring-4 ring-offset-2 ring-yellow-400 translate-x-340': sidebar === 'yellow',
							'ring-4 ring-offset-2 ring-pink-500 translate-x-510': sidebar === 'pink',
							'ring-4 ring-offset-2 ring-indigo-600 translate-x-680': sidebar === 'indigo',
							'ring-4 ring-offset-2 ring-orange-600 translate-x-850': sidebar === 'orange',
							'ring-4 ring-offset-2 ring-green-500 translate-x-1020': sidebar === 'green',
						}
					)}
				>
					<div className="w-full h-full rounded-md"></div>
				</div>
				<div className="relative flex justify-between w-full h-full">
					<button
						tabIndex={0}
						className={clsx('w-10 h-10 bg-red-600 rounded-full focus:outline-none', {
							active: sidebar === 'red',
						})}
						onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
							if (event.key === 'Tab') setSidebarTheme('red')
						}}
						onClick={() => {
							setSidebarTheme('red')
						}}
					></button>
					<button
						tabIndex={0}
						className={clsx('w-10 h-10 bg-blue-400 rounded-full focus:outline-none', {
							active: sidebar === 'blue',
						})}
						onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
							if (event.key === 'Tab') setSidebarTheme('blue')
						}}
						onClick={() => {
							setSidebarTheme('blue')
						}}
					></button>
					<button
						tabIndex={0}
						className={clsx('w-10 h-10 bg-yellow-400 rounded-full focus:outline-none', {
							active: sidebar === 'yellow',
						})}
						onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
							if (event.key === 'Tab') setSidebarTheme('yellow')
						}}
						onClick={() => {
							setSidebarTheme('yellow')
						}}
					></button>
					<button
						tabIndex={0}
						className={clsx('w-10 h-10 bg-pink-500 rounded-full focus:outline-none', {
							active: sidebar === 'pink',
						})}
						onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
							if (event.key === 'Tab') setSidebarTheme('pink')
						}}
						onClick={() => {
							setSidebarTheme('pink')
						}}
					></button>
					<button
						tabIndex={0}
						className={clsx('w-10 h-10 bg-indigo-600 rounded-full focus:outline-none', {
							active: sidebar === 'indigo',
						})}
						onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
							if (event.key === 'Tab') setSidebarTheme('indigo')
						}}
						onClick={() => {
							setSidebarTheme('indigo')
						}}
					></button>
					<button
						tabIndex={0}
						className={clsx('w-10 h-10 bg-orange-600 rounded-full focus:outline-none', {
							active: sidebar === 'orange',
						})}
						onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
							if (event.key === 'Tab') setSidebarTheme('orange')
						}}
						onClick={() => {
							setSidebarTheme('orange')
						}}
					></button>
					<button
						tabIndex={0}
						className={clsx('w-10 h-10 bg-green-500 rounded-full focus:outline-none', {
							active: sidebar === 'green',
						})}
						onKeyUp={(event: React.KeyboardEvent<HTMLElement>) => {
							if (event.key === 'Tab') setSidebarTheme('green')
						}}
						onClick={() => {
							setSidebarTheme('green')
						}}
					></button>
				</div>
			</div>
		</>
	)
})