I can't maek beautiful websight

[hide1111111]

Summary

The text will be displayed and can be clicked. However, the background color and text color remain the usual black and white.

Additional information

import Link from 'next/link'

const Navigation = () => {
    return(
        <div className='bg-gray-900'>
            <div className='max-w-7xl max-auto px-8 py-6'>
                <div className='flex items-center justify-between'>
                    <div>
                        <Link href = '/' className="text-white hover:text-gray-50 font-extrabold text-lg">
                        sns
                        </Link>
                    </div>
                    <div>
                    <Link href='/login' className='button-nav mr-4'>
                        log in
                    </Link>
                    <Link href='/register' className='button-nav'>
                        account
                    </Link>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default Navigation

Example

No response