Submitted over 1 year ago

FAQ accordion (Tailwind CSS + AlpineJS)

accessibility, animation, pwa, tailwind-css, lighthouse

Andrés Gutiérrez Ramírez•2,470

@AGutierrezR

A solution to the FAQ accordion challenge

Preview Code

Solution retrospective

Hi there 👋, I’m Andres, and this is my solution for this challenge. 🚀

🎁 Features:

Achieved 100% in Lighthouse score for performance, accessibility, best practices. SEO was 91%. 📊
Utilized TailwindCSS for responsive styling. 🎨
Codebase is well-maintained and formatted using Prettier. 💻
Resemblance with the original design. 🎨
Integrated very small animation. ✨

🛠️ Built With:

TailwindCSS. 🎨
npm - prettier - prettier-plugin-tailwindcss. 💻
Fluid Layout

Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

Thank you. 😊✌️

Code

Please log in to post a comment

Community feedback

Yonten•340
@yozidst
Posted over 1 year ago
Hello 👋,

Congrats! on the challenge. Great job on the layout. Here is a minor/unnecessary tip:
```
html {
    border-left: #333 solid 1px;
    border-right: #333 solid 1px;
}
```
~This would hide that 1px for the pink line appearing from both sides by camouflaging with the monitor's side shadow.

Also, maybe implement a margin-top on your container, that way it stops the accordion from expanding higher. On mobile view on 375px, the content gets cut off from the bottom and can't be scrolled downwards. An accommodating margin-top and bottom padding will prevent content from getting cut off from the user's reach. Nevertheless, Keep going!

Here's my approach:

eg.
```
.container {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 34px;   // depending on preference; bottom padding* mainly 
    margin-top: 134px  // depending on preference; this was my setup
}
```
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord