Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
9
P
MarcWebDev
@MarcWebDev

All comments

  • Mesroua Djamel•430
    @MesrouaDjamel
    Submitted 11 months ago

    Responsive nft preview card using flexbox

    #react#tailwind-css#next
    1
    P
    MarcWebDev•170
    @MarcWebDev
    Posted 10 months ago

    Nice work!

    There is not much to criticize. Your solution is really close to the design.

    There are only three things I noticed.

    1. The avatar at the bottom is missing the white border from the design.
    2. Your spacing is a little too much.
    3. You should double-check the font sizes and font weights. It looks like some texts are a little too big and some have a wrong font weight.

    That's all. I hope my feedback helps and you can improve the three things.

    Keep up the great work and have a nice day!

    Marked as helpful
  • P
    Pablo Yuri•190
    @pylopes
    Submitted 10 months ago

    Stats preview card component

    1
    P
    MarcWebDev•170
    @MarcWebDev
    Posted 10 months ago

    Nice solution!

    You could improve the image and the component is a little too small, but the rest looks very good!

    Hope this helps, have a great day!

  • Oscar Alvarez•190
    @oscaralvarezp
    Submitted 10 months ago

    Blog preview card - HTML + CSS

    1
    P
    MarcWebDev•170
    @MarcWebDev
    Posted 10 months ago

    Really amazing submission, not really much to say!

    Your card is a little bit too small and the spacing is a little too small as well, but the rest looks really nice! Great job!

    Your code is also really clean and well organized.

    Hope this is helpful, have a nice day!

  • Alaa eddine•80
    @alaaeddineGO
    Submitted about 1 year ago

    typescript

    #typescript
    1
    P
    MarcWebDev•170
    @MarcWebDev
    Posted 10 months ago

    Your base layout is correct, but you have to improve a lot. The spacing and the width/height of the cards is not correct. The colors are also not correct and the images are not loading. The size of the first text ("Reliable ...") is too small. The shadow of the cards is too intense and the cards also don't have a border-radius.

    You should also work on the responsive layout for tablets because there the cards are really small.

    I hope this was helpful and I'm sure you can improve your code to match the design even more!

  • Nathan Orobor•150
    @omarnate1
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have mastered Tailwind CSS to adapt images for different screen sizes dynamically.

    This skill has greatly enhanced the responsiveness and user experience of my web projects.

    I would focus on optimizing image loading and performance by leveraging responsive image techniques such as srcset and sizes.

    Additionally, I would explore more advanced Tailwind CSS features and plugins to further streamline my workflow.

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

    change the images on different screen sizes, tailwind CSS and Google search did the magic.

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

    none.

    Responsiveness done with tailwind CSS

    #tailwind-css
    1
    P
    MarcWebDev•170
    @MarcWebDev
    Posted 11 months ago

    Looks very good! You changed the color and the top spacing a bit but the rest looks pretty clean!

    I also really like your responsive design, you added a lot of breakpoints and it's a very nice experience on all devices.

  • Kadir Yıldırım•380
    @kadiryildiri
    Submitted 11 months ago

    Recipe Page | React & Tailwind

    #react#tailwind-css#vite
    1
    P
    MarcWebDev•170
    @MarcWebDev
    Posted 11 months ago

    It looks like the table at the bottom doesn't have spacing and you didn't use the brown color. The rest looks pretty good!

  • Prime Colet•30
    @sjake12
    Submitted 11 months ago

    Social links using tailwind css

    #tailwind-css
    1
    P
    MarcWebDev•170
    @MarcWebDev
    Posted 11 months ago

    Already very good! However, the colors don't seem to match completely and you changed the buttons and the border-radius a bit.

  • Mayank Kushwah•80
    @mynkRog
    Submitted 11 months ago

    simple card

    #react#tailwind-css
    1
    P
    MarcWebDev•170
    @MarcWebDev
    Posted 11 months ago

    Your solution is pretty good, but it looks like the spacing isn't correct and the "Published 21 Dec 2023" text doesn't follow the design. The component overall looks a litte too small.

    Marked as helpful
  • KorriganMaster•70
    @KorriganMaster
    Submitted 11 months ago
    What challenges did you encounter, and how did you overcome them?

    At the beginning I didn't really know how to organize my CSS. Then I choose to design it utility first like Tailwind does. I think this approach produce CSS which is more easily reusable than working with semantic class names (just my opinion though).

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

    Have you some advices on the best way to organize CSS and in your opinion which is the best CSS design pattern between:

    • semantic class names
    • utility first

    Frontend Mentor - QR code component

    #tailwind-css
    1
    P
    MarcWebDev•170
    @MarcWebDev
    Posted 11 months ago

    Well done! I've also used utility classes and think it's a great option for smaller projects. In large codebases, it can look overwhelming, but it definitely saves you a lot of time.

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub