Submitted 4 months ago

Responsive loopstudios landing page using React and Tailwind-CSS

react, tailwind-css, vite, accessibility

Rora Alem•370

@Rgit915

A solution to the Loopstudios landing page challenge

Preview Code

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Using Tailwind’s group utility for hover effects

It was tricky at first to apply hover styles to child elements based on the parent. I solved this by adding group to the parent and using group-hover on children to fade the image and change text color on hover.

<div className="group">
  <img className="group-hover:opacity-50" />
  <h3 className="group-hover:text-black">Title</h3>
</div>

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Rora Alem's solution.

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