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

All comments

  • P
    Ashmit-kansal•260
    @Ashmit-kansal
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I will make my code more modular next time by dividing code into components and will also use redux for state management.

    Password generator app

    #react#tailwind-css#vite
    1
    P
    devmd1997•190
    @devmd1997
    Posted about 1 month ago

    Good use of React to create the components! React reducers can be tricky but in my experience separating the state into a different folder helps out with state management and cleaner code overall.

  • Hammam Yousef•160
    @HammamYousef
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Continuing coding with react and tailwind

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

    the validation of the inputs also divide components into smaller components.

    Animated Tip App

    #animation#react#tailwind-css#vite#typescript
    1
    P
    devmd1997•190
    @devmd1997
    Posted about 1 month ago

    Good design, can't see where the validation is done though to make sure the inputs are correct. Might of been an oversight when developing. Good use of react to take care of handling the data!

  • P
    Ashmit-kansal•260
    @Ashmit-kansal
    Submitted about 1 month ago
    What specific areas of your project would you like help with?

    If I have done any mistake point it out or any improvements that can be done.

    Time tracking dashboard

    #react#tailwind-css#vite
    1
    P
    devmd1997•190
    @devmd1997
    Posted about 1 month ago

    Like your design! Minor things to improve, the text of the current time is supposed to change it's size when the screen is large. It's supposed to go from text-preset-3 to text-preset-1. To accomplish this, you should use the @utility directive for your presets and then add the lg: tag to change the style when necessary.

  • P
    Ashmit-kansal•260
    @Ashmit-kansal
    Submitted about 1 month ago
    What specific areas of your project would you like help with?

    I would like help with my tailwind. I created custom classes for typography. I applied these classes according to screen width but I was not able to override my styling on md screen for h1. Please tell me what mistake I am doing.

    Newsletter sign-up form with success message

    #react#tailwind-css#vite
    1
    P
    devmd1997•190
    @devmd1997
    Posted about 1 month ago

    The reason you probably can't override the styling for md screen for h1 is because you have the text styles in the component layer, any utility components will override it. If you wanted all the h1 tags to have the same styling, try using @layer base next time and style the h1 tags. For example:

    @layer base {
     h1 {
      @apply text-blue md:font-[16px]
     }
    }
    
    
  • Amiko Elvis•260
    @amikoelvis
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of implementing a responsive share menu that adapts seamlessly between mobile and desktop layouts, a core challenge of the Frontend Mentor project. Using JavaScript, I created a toggle system where the share button reveals social media links, replacing the author section on mobile and showing a popover with a triangle pointer on desktop. The isMobileView() function was key to handling these layout differences, and I’m thrilled with how the resize event listener ensures the UI resets correctly when switching screen sizes. Styling the menu with Tailwind CSS, especially the desktop triangle pointer using pseudo-elements ([&::after]), was a highlight, as it perfectly matched the design. Adding aria-label attributes to the share button and social links boosted accessibility, making the component more inclusive. Seeing the toggle work smoothly across devices while maintaining a clean, semantic HTML structure felt like a major win.

    Next time, I’d add smooth animations to the share menu’s appearance, such as a fade or slide effect using Tailwind’s transition classes, to make the toggle more engaging. I’d also enhance accessibility by adding aria-expanded to the share button and managing focus for keyboard users, ensuring the first social link is focused when the menu opens. My JavaScript could be more modular—splitting the toggle logic into separate functions for opening and closing the menu would improve maintainability. I’d also refine the resize event listener to avoid unnecessary DOM updates by checking the menu’s current state. Finally, I’d test the component earlier on more devices and browsers to catch edge cases, like the share menu’s positioning on smaller desktop screens, and consider debouncing the resize handler for better performance.

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

    Responsive Share Menu: Positioning the share menu (mobile: full-width bar, desktop: popover with triangle) was tough. I used Tailwind’s md: classes and isMobileView() in JavaScript, testing with DevTools to fine-tune md:right-[-215px] and pseudo-elements ([&::after]).

    Share Menu Toggle: Toggling the menu (mobile: hide author, desktop: popover) caused layout glitches. I implemented device-specific logic with classList.toggle('hidden') and a mobile close button, debugging with console logs to ensure smooth transitions.

    Tailwind CSS: Mastering Tailwind’s utilities (e.g., [&::after]:border-t-gray-700) was challenging. I followed Tailwind’s docs, building incrementally and checking in DevTools.

    Triangle Pointer: Positioning the triangle (rotate-45) was tricky. I used trial-and-error with left-1/2 and translate-x-1/2, verifying alignment in DevTools.

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

    Animations for Share Menu: Issue: Abrupt toggle with hidden.

    Help: Add fade/scale animation.

    Solution:

    html
    
    <div id="share-menu" class="hidden opacity-0 scale-95 transition-all duration-300 ...">
    
    js
    
    shareBtn.addEventListener('click
    

    Responsive article preview component using Tailwind CSS and JavaScript

    #tailwind-css
    1
    P
    devmd1997•190
    @devmd1997
    Posted 2 months ago

    Good use of tailwind to style your components. The javascript code is very clean and readable. I like how you utilized the same component for the share button toggle. Very good design!

  • P
    Alexander•120
    @lordever
    Submitted 3 months ago

    Meet landing page

    #tailwind-css
    1
    P
    devmd1997•190
    @devmd1997
    Posted 3 months ago

    Very good design, very good use of tailwind and it's components. The only thing that could improve is that on smaller screens (less than 300 px) the layout seems to break but I think that because of the breakpoints in your code.

  • Grecco Oliva, Franco•310
    @GreccoOliva-Franco
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?
    • Mentally constructing the UI was faster

    • Coding the solution becomes easier

    • Think more ways of solving the same problem

    • I would try to solve it using only TW grid props, next time

    What challenges did you encounter, and how did you overcome them?
    • I keep not feeling confortable with letter-spacing letter-height but I guess that with detailed designs it becomes quite easier
    What specific areas of your project would you like help with?
    • Naked eye UI prototyping

    NextJs - TailwindCSS - Flexbox only

    #next#tailwind-css
    1
    P
    devmd1997•190
    @devmd1997
    Posted 3 months ago

    I liked how you used different components in React to get to the solution. It is easier to develop in smaller components when you do this. The only feed back I can give on the solution is to try to develop with a mobile first layout then develop for larger screens.

  • Stefano Lezzi•350
    @Steno-95
    Submitted 3 months ago

    Responsive four card feature section with react and tailwindcss

    #react#tailwind-css
    1
    P
    devmd1997•190
    @devmd1997
    Posted 3 months ago

    Good use of javascript to dynamically generate the cards! When viewing the site I noticed that the card sizes would change based on the screen size. The cards should have a max width so it doesn't resize on smaller breakpoints but otherwise good job!

  • shree•170
    @shreejaybhay
    Submitted over 1 year ago

    Product preview card component

    #tailwind-css
    1
    P
    devmd1997•190
    @devmd1997
    Posted 3 months ago

    Good design, I see that in your source code you use percentages for width and height sizes. This can be good for making static sites, but can cause some issues when the viewport changes it's length. You should use fixed widths or heights for specific media breakpoints and that will make the component more responsive.

  • wxyzz22•240
    @wxyzz22
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    In this project, I learned to gain familiarity working with Tailwind CSS. It's a lot of fun using Tailwind compared to the traditional CSS stylesheet, e.g.

    • one does not need to go back and forth between two scripts
    • no need to come up with the most creative class/id names

    For example, in order to achieve the effect

    .myclass {
      font-weight: bold;
    }
    

    One can just do

    <p class="font-bold">Some HTML code I'm proud of</p>
    

    I am more comfortable with planning and thinking through the general structure/design layout of the website first before coding, which helps me streamline the CSS coding process. For example, check the index.html script in my GitHub repo, where I used id to indicate what the structure/layer of a component is, and styled it consistently across.

    Comments: This is the first time I use Tailwind CSS to do a project. I find it helpful to just skim through the introduction on the Tailwind CSS official website and use the website as a Tailwind Class dictionary (search for CSS tags when in need). It was such a breeze of using Tailwind compared to traditional CSS via stylesheet. Highly recommend for anyone who has not started using it yet.

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

    The main challenge I faced in the project has to do with the Tailwind CSS setup and syntax. Since this project is mainly using only vanilla HTML (and no React or even Javascript), I decided to not bother installing Tailwind Vite yet and went with using the Plan CDN (i.e. by including the following in the <header> of my index.html script)

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    

    However, this approach had quite some limitation on customization, and I even had trouble getting the VS Code Tailwind CSS IntelliSense working. I resolved these by:

    • Import custom font from ttf file: one can define the script
    <style>
        @font-face {
          font-family: 'Outfit';
          src: url('./assets/fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
        }
    </style>
    
    • Customization: one can define custom classes as follows
    <style type="text/tailwindcss">
        @theme {
          --color-clifford: #da373d;
          --font-outfit: 'Outfit', sans-serif;
          --text-x40: 40px;
        }
    </style>
    ...
    <h1 class="text-clifford text-x40 font-outfit"></h1>
    
    • VS Code Tailwind CSS IntelliSense: include the file tailwind.config.js in the main directory even if it's empty when using Play CDN version of Tailwind.
    What specific areas of your project would you like help with?

    I still find it hard motivating myself to learn CSS. I think I understand the basic syntax and the common CSS properties like flex-box, fonts, margin/padding and etc; but it seems like there are a lot more advanced topics which are seldomly used and tedious to just read docs. Do you have good suggestions/resources on getting better at CSS?

    Recipe Page Tailwind CSS

    #tailwind-css
    1
    P
    devmd1997•190
    @devmd1997
    Posted 3 months ago

    Very good job with utilizing tailwind to style this! The only feedback I can give is that you can try putting the tailwind tags into custom classes and components so you don't have to reuse component tags for the same components. Other than that great job!

  • Matias Ludueña•1,990
    @matiasluduena23
    Submitted about 1 year ago

    Social Link with tailwind

    #tailwind-css
    1
    P
    devmd1997•190
    @devmd1997
    Posted 3 months ago

    Good job with laying out the components and utilizing "atomic design". For improvements, I would encourage to not use too many different files for each individual component for smaller projects. It could be hard for other developers to follow along and harder to debug on your part. Think of each component as a layer and design layer by layer. You will notice that a lot of components use the same or similar styles and this can help simplify your code. For example, you could use a gap tailwind css tag to configure the horizontal padding distance each child component has in the section tag instead of copying and pasting each padding and margin value. If there are sub components that have different padding in a container (like the link buttons), you can overwrite the padding from the parent section tab and create a new div with different gap values. I would also encourage you to try and utilize tailwind css custom components to make styling more concise.

  • Stefano Lezzi•350
    @Steno-95
    Submitted 3 months ago
    What specific areas of your project would you like help with?

    One of the additional challenge said to make the text change size without the use of media queries, i found that i could use in the body selector

    body{font-size:calc(0.75em + 1vmin);}

    But using tailwind default classes i actually didn't see any difference, i guess i would have to custom change them or make my own to make it work but if someone can give me some tips on this i would be grateful! 😁

    Blog Card Preview with react, tailwind css and some custom css

    #react#tailwind-css
    1
    P
    devmd1997•190
    @devmd1997
    Posted 3 months ago

    Good use of using react and separating out each component. The layout for the content seems to change depending on the screen size. I often run into this problem sometimes too. To fix that I use a top down approach when building the layout for individual components. Focus on building the parent component's layout then the child components will conform to the parent's rules. I would also suggest using Tailwind custom styles in your future approaches as it makes organizing your styles easier and easier to debug if something unexpected happens.

  • techglory.swe•90
    @GLOPO
    Submitted 3 months ago

    QR Code Component

    #tailwind-css#next
    1
    P
    devmd1997•190
    @devmd1997
    Posted 3 months ago

    Good Design, try using some auto layout tailwind styles so you don't have to hard code sizing. For example, w-fit or h-fit can "hug" your parent component to it's children. You would just have to worry about the sizing of the icon component and the parent component will auto size.

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

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