Skip to content
Submitted 3 months ago

Easybank landing page with React and Tailwind CSS

Achinthya Dulshan•190
@AchinthyaDulshan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Easybank landing page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am now able to configure and work with React and Tailwind CSS more easily than before. That time I worked with gradients and mainly position with CSS. Next time I'm try to do more with CSS positions.

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

Really challenging situation was the designing the Hero section. That Image positioning was got more time than other components. Finally somehow I did it through testing various configurations with my code.

What specific areas of your project would you like help with?

Image positioning in hero section and changing color of SVG's when hover it. I tried fill property in tailwind but it doesn't work.

Community feedback

  • Teodor Jenkler•3,820
    @TedJenklerPosted 3 months ago

    Hi @AchinthyaDulshan,

    Nice project! I especially liked the animation on the navbar—great job on that!

    I have a few tips for improvement. I noticed that you have your components folder inside the assets folder. Typically, the assets folder is used for design-related items like images and sometimes SCSS files. It’s usually better to place the components folder alongside the assets folder in the src directory. This would make your project structure easier to navigate and understand.

    Also, if you’re using the <img /> tag for SVGs, keep in mind that you can’t use the inline fill attribute—it only works with the <svg /> tag. If you prefer using <img /> tags for SVGs (which isn’t recommended), you’ll need to override the fill with CSS. When using the <svg /> tag, be sure not to include the fill attribute in the path element, as it would override any Tailwind CSS classes you apply.

    Otherwise, this project is solid and responsive, and you’re using a good structure.

    I hope this feedback is helpful!

    Best, Teodor

    Marked as helpful
    1
    Achinthya Dulshan•190
    @AchinthyaDulshanPosted 3 months ago

    Hi @TedJenkler

    I greatly value your feedback on my project. Your insights on the component folder and the SVG tag were very enlightening. I will incorporate this knowledge to enhance my next project significantly.

    Thank you, Achinthya.

    1

Please log in to post a comment

Log in with GitHub

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