Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
13

Grecco Oliva, Franco

@GreccoOliva-FrancoArgentina290 points

Backend Dev that learned to center a

Latest solutions

  • NextJs - Tailwind CSS - Shadcn UI

    #next#tailwind-css#shadcn

    Grecco Oliva, Franco•290
    Submitted about 1 month ago

    1 comment
  • NextJS - Tailwind CSS - Shadcn UI - Zustand

    #next#tailwind-css#zustand#shadcn

    Grecco Oliva, Franco•290
    Submitted about 1 month ago
    • ARIA, as always. Is there any tool that evaluates ARIA?

    0 comments
  • NextJs - Tailwind CSS - Shadcn UI

    #next#tailwind-css#shadcn

    Grecco Oliva, Franco•290
    Submitted about 1 month ago

    1 comment
  • NextJs - Tailwind CSS - React Hook Form

    #next#tailwind-css#react-hook-form

    Grecco Oliva, Franco•290
    Submitted about 2 months ago
    • Animations (It is out of my league right now. I'll come to it soon, though)

    1 comment
  • NextJs - Tailwind CSS

    #next#tailwind-css

    Grecco Oliva, Franco•290
    Submitted about 2 months ago

    1 comment
  • NextJs - Tailwind CSS

    #next#tailwind-css

    Grecco Oliva, Franco•290
    Submitted about 2 months ago
    • None, thanks. This project did not feel like a challenge which speaks quite good of my improvement along all the challenges previously done. Thanks Frontend Mentor!

    1 comment
View more solutions

Latest comments

  • Vedant Agrawal•600
    @vedantagrawal524
    Submitted about 2 months ago

    NFT preview card component

    #tailwind-css
    1
    Grecco Oliva, Franco•290
    @GreccoOliva-Franco
    Posted about 1 month ago

    Quite good.

    I see you achieve the SVG color coping the <path fill="#FFF">. Do you know if it is possible with tailwind?

  • James.•460
    @Jimztech
    Submitted about 1 month ago

    Ecommerce product page

    #tailwind-css
    1
    Grecco Oliva, Franco•290
    @GreccoOliva-Franco
    Posted about 1 month ago
    • Container:
      • Too wide. I tried a w-8/10 and it worked quite well
    • Header:
      • Hamburguer menu link fails
      • Desktop menu does not appear on 1440px
      • The separator is too thick
    • Content:
      • Mobile carousel:
        • Buttons are not centered nor rounded
      • Desktop carousel:
        • Check the requirements. There are a few things missing
      • Product Quantity Selector is in sync with cart badge. This behaviour is not correct. The "Add to cart" button should pick the quantity and add those items into the cart. The cart badge should match the sum of item * quantity within the cart
      • "Add to cart" button opens the cart, does not add items to the cart.
      • More margin bottom on Mobile screen

    I'm not trying to be mean to you. I'm just training my eye for details while pointing out things that could be improved and make your designs pixel perfect which is what the industry wants.

    Questions:

    • I've struggled a lot with this and still could not overcame it: How did you achieve the shopping cart icon to be black instead of its default gray color?
    • How long did it took to complete the challenge? In my case, it was longer than I expected and still could not achieve 100% the requirements

    Hope this comment helps you. Keep going and don't give up!

    Marked as helpful
  • Atsuno•200
    @Atsuno
    Submitted over 1 year ago

    news homepage

    #next#react#tailwind-css
    1
    Grecco Oliva, Franco•290
    @GreccoOliva-Franco
    Posted about 1 month ago
    • General:
      • Background should be color cream
      • More padding on top of the navbar
    • Main Article:
      • "READ MORE" button has text in white. It should be black
      • Paragraph line-heigh should be bigger
      • Spacing between paragraph and button
    • "New" section:
      • Subarticles titles should be font bold and spaced evenly/between depending on the html structure you build
    • Bottom articles:
      • "0<number>" text should be in orange/red

    I'm not trying to be mean to you, I'm just training my eye for details.

    Good job overall. Keep going!

  • İbrahim Hakkı Ergin•20
    @06ergin06
    Submitted 4 months ago

    Contact Form (Not Finished)

    #next#react-hook-form#tailwind-css
    1
    Grecco Oliva, Franco•290
    @GreccoOliva-Franco
    Posted about 2 months ago
    • Card corners need more radius
    • Excessive padding on top and bottom
    • Inputs need padding and borders should be lighter

    Looks good, though. Keep on going

  • P
    Alexwz89•480
    @Alexwz89
    Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Happy to start merging tailwind css and typescript into my React project.

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

    The background image setting is the most tricky part for me. In order to use bg-[url()] utility, I have to move two background image into public folder.

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

    Definitely Aria part

    Faq-Accordion with React and Tailwind

    #tailwind-css#typescript#react
    1
    Grecco Oliva, Franco•290
    @GreccoOliva-Franco
    Posted about 2 months ago

    Comments on your solution:

    • Nice match of sizes

    Comments on my solution: I solved the bg img with:

    <body className="relative flex flex-col h-screen ...">
      <img
        src={src}
        className="absolute top-0 w-full aspect-auto"
      />
      { /* FAQs Card */ }
    </body>
    

    And the overlap with a "z-1" for the card. That might come in handy for future solutions

    I completely agree on the Aria part. I'm offloading that part for the future

    Marked as helpful
  • Chris Ebube Roland•160
    @ChrisRoland
    Submitted about 2 months ago

    Interactive Rating Component

    #tailwind-css
    1
    Grecco Oliva, Franco•290
    @GreccoOliva-Franco
    Posted about 2 months ago
    • Card size is small
    • Needs more vertical spacing (gap)
    • Card's bg-color needs some opacity (I also have this problem)
    • Fonts don't match size and weight
    • Submit buttons should use class "uppercase" if content is written in non-uppercase

    You're good, go on, keep going!

View more comments
Frontend Mentor logo

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

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