Social Links using Tailwind and animations

Hey, very nice work with your TailwindCSS .

Just some advice about accessibility :

1. Add ARIA (Accessible Rich Internet Applications) tags:

   • Add ARIA roles for navigation and content elements.

   <div class="w-full max-w-80 bg-dark-grey p-6 rounded-lg flex flex-col items-center gap-6" role="contentinfo">
   

2. Improve image descriptions:

   • Add more detailed descriptions for images.

   <img alt="Profile picture of Jessica Randall" src="./assets/images/avatar-jessica.jpeg" class="rounded-full h-24 w-24" draggable="false"/>
   

3. Add navigation attributes to links:

   • Add aria-label attributes to links to indicate their destination.

   <a href="#" class="w-full py-3 bg-grey rounded-lg hover:bg-primary hover:text-off-black transition-colors" aria-label="Jessica Randall's GitHub profile">GitHub</a>
   

4. Add a container for the <main> tag:

   • Add a <main> tag to indicate the main content region.

   <main class="w-full max-w-80 bg-dark-grey p-6 rounded-lg flex flex-col items-center gap-6">
   

5. Use accessible links:

   • Ensure that external links open in a new tab while informing users.

   <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary visited:text-primary" aria-label="Frontend Mentor challenge opens in a new tab">Frontend Mentor</a>