In my current project, I am utilizing React JS with Node, and npm as the package manager.
Within the project, I have incorporated various packages such as heroicons and tailwind.
To style the text in my footer as grey, I have applied the "text-slate-500" color in my Footer.js file.
Despite not including the underline property in my code, the result displays in blue and underlined.
As a beginner in frontend development and new to tailwind CSS, I appreciate any assistance and apologize for any missing information.
Below are the files:
Footer.js
import React from 'react'
import { HomeIcon } from '@heroicons/react/outline'
export const Footer = () => {
return (
<footer className="mx-auto mt-32 w-full max-w-container px-4 sm:px-6 lg:px-8">
<div className="border-t border-slate-900/5 py-10 row-start-auto">
<p className="mt-5 text-center text-sm leading-6 text-slate-500">© {new Date().getFullYear()} Hochschule für angewandte Wissenschaften Würzburg - Schweinfurt</p>
<div className="mt-16 flex items-center justify-center space-x-4 text-sm font-semibold leading-6 text-slate-700">
<a href="/datenschutz">Datenschutz</a>
<div className="h-4 w-px bg-slate-500/20">
</div>
<a href="/impressum">Impressum</a>
<div className="h-4 w-px bg-slate-500/20"></div>
<a href="/barrierefreiheit">Barrierefreiheit</a>
<div className="h-4 w-px bg-slate-500/20"></div>
<a href="/">Deutsch - English</a>
</div>
</div>
</footer>
)
}
export default Footer;
package.json
{
"name": "aicard",
"version": "0.1.0",
"private": true,
// List of dependencies
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
colors: {
// Custom color configurations
},
},
},
plugins: [],
}
See the visual representation of my Footer.js here