import React from 'react';
export default function App() {
return (
<div>
<a
href="#!"
className="text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 active:text-primary-700 dark:text-primary-400 dark:hover:text-primary-500 dark:focus:text-primary-500 dark:active:text-primary-600"
>Primary link</a>
<a
href="#!"
className="text-secondary transition duration-150 ease-in-out hover:text-secondary-600 focus:text-secondary-600 active:text-secondary-700"
>Secondary link</a>
<a
href="#!"
className="text-success transition duration-150 ease-in-out hover:text-success-600 focus:text-success-600 active:text-success-700"
>Success link</a>
<a
href="#!"
className="text-danger transition duration-150 ease-in-out hover:text-danger-600 focus:text-danger-600 active:text-danger-700"
>Danger link</a>
<a
href="#!"
className="text-warning transition duration-150 ease-in-out hover:text-warning-600 focus:text-warning-600 active:text-warning-700"
>Info link</a>
<a
href="#!"
className="text-info transition duration-150 ease-in-out hover:text-info-600 focus:text-info-600 active:text-info-700"
>Info link</a>
<div className="bg-neutral-800">
<a
href="#!"
className="text-neutral-50 transition duration-150 ease-in-out hover:text-neutral-100 focus:text-neutral-100 active:text-neutral-200"
>Light link</a>
</div>
<a
href="#!"
className="text-neutral-800 transition duration-150 ease-in-out hover:text-neutral-800 focus:text-neutral-800 active:text-neutral-900 dark:text-neutral-900 dark:hover:text-neutral-900 dark:focus:text-neutral-900 dark:active:text-neutral-900"
>Dark link</a>
<div className="bg-neutral-800">
<a
href="#!"
className="text-white transition duration-150 ease-in-out hover:text-neutral-100 focus:text-neutral-100 active:text-neutral-200"
>White link</a>
</div>
<a href="#!" className="text-black transition duration-150 ease-in-out"
>Black link</a>
</div>
);
}