Submitted 12 months ago
Responsive article preview component using tailwind css
@replayzor
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I am proud that i did it
What challenges did you encounter, and how did you overcome them?No challenge
What specific areas of your project would you like help with?Anything
Community feedback
- @mofadaPosted 3 months ago
First of all, congratulations on completing the challenge. I found some small problems, of course, this is just my own opinion
I think the tailwind color naming should follow lowercase, like this
text-color-blue-100
, so you should define it like thiscolors: { 'dark-grayish-blue': 'hsl(217, 19%, 35%)', // or like this dark:{ grayish:{ blue:'hsl(217, 19%, 35%)' } } }
Then in the desktop you seem to have missed the triangle part, you can use svg icon or use css to draw it, like this:
#tooltip:before { /*Triangle line*/ position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid hsl(217, 19%, 35%); }
Finally, your tooltip prompt box seems to have a problem with the position. It does not appear where it should appear. Perhaps you can use js to get the coordinates and display them.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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