Smaylen5
@Smailen5All solutions
Ecommerce with React and Tailwind v 4.0.6
#motion#react#tailwind-css#vite#react-routerPSubmitted 5 months agoI've decided to separate the types and the application's logic to keep the components as clean as possible. The problem is that everything still feels a bit messy.
Do you have any suggestions on code organization methods besides Atomic Design?
Contact form whit React, Typescript and Formik
#accessibility#react#tailwind-css#typescript#vitePSubmitted 10 months agoAll feedback welcome 😃
Faq accordion accesibility
#accessibility#react#shadcn#typescript#tailwind-cssPSubmitted 10 months agoAny feedback is welcome 😉
Frontend quiz whit Typescript
#accessibility#react#tailwind-css#typescript#react-routerPSubmitted 10 months agoAny feedback is welcome! 😉
skilled elearning whit tailwind, shadcn ui, typescript and react
#react#shadcn#tailwind-css#typescript#vitePSubmitted 10 months agoEven though I positioned the image correctly, when I use
absoluteI have issues with the layout, I have to manage it at every breakpoint, otherwise it breaks. In any case, it often happens that the layout breaks between breakpoints. This time, I wanted to try using onlytranslateto position the hero image, which is definitely better than usingabsolute, but the issue of the layout breaking remains. Between breakpoints, the image ends up underneath other components like the navbar or the cards section. I don’t understand what I’m doing wrong, or maybe I need to check the image positioning at each breakpoint. The component in question is HeroImage.base apparel whit tailwind, react, formik and yup
#react#tailwind-css#accessibilityPSubmitted 12 months agoI would appreciate feedback on:
- Whether the code is semantically correct.
- If there’s a better way to use CSS variables.
Portfolio single page with React, Tailwind, Formik and Yup
#accessibility#react#tailwind-css#vitePSubmitted 12 months agoForm Validation and User Feedback: I would love to get some feedback on how to better handle complex form validation scenarios with Formik and Yup. Are there more efficient ways to handle dynamic fields and display error messages?
Performance Optimization: Any advice on how to optimize the performance of a React-based portfolio, especially regarding load times and rendering efficiency, would be appreciated. Are there any specific techniques or tools that can help?
Accessibility Improvements: Tips for improving accessibility compliance and SEO practices would be very helpful. Are there any best practices or tools that can help identify and fix accessibility issues in a React application?
Tailwind CSS Integration: Feedback on how to better integrate custom fonts and CSS variables with Tailwind CSS would be helpful. Are there any common issues or best practices to follow?
Intro component with sign up form with react & tailwindcss
#react#vite#tailwind-cssPSubmitted 12 months agoPassword generator whit Tailwind and JavaScript vanilla - only desktop
#tailwind-cssPSubmitted about 1 year agoUnfortunately, I've written many if statements both in the function to generate the password and in the function that checks the password strength. I know that a good refactoring is needed, but for now, I have no idea how to proceed.
tip calculator whit tailwind and js vanilla
#tailwind-css#accessibilityPSubmitted about 1 year agoFor the custom button, I always used
type='radio'. I think I could simply usetype='number'.time tracking dashboard whit Taiwind and js vanilla
#accessibility#tailwind-cssPSubmitted over 1 year agoTo write inside the HTML, I used this solution that I really don't like. I would like to simplify this part in the future.
function daily(data) { workHours.innerText = data[0].timeframes.daily.current + "hrs"; workPrevious.innerText = `Previous - ${data[0].timeframes.daily.previous}hrs`; playHours.innerText = data[1].timeframes.daily.current + "hrs"; playPrevious.innerText = `Previous - ${data[1].timeframes.daily.previous}hrs`;newsletter sing up whit Tailwind Keyboard accessible.
#tailwind-css#accessibilityPSubmitted over 1 year agoI think I messed up with:
inputEmail.classList.remove("border-tomato"); inputEmail.classList.remove("bg-tomato-light"); inputEmail.classList.remove("text-tomato");Is there a way to make this part of the code simpler and less repetitive? I did the same thing to add the classes I wanted, it seems like too much code and too repetitive, I was thinking abouttogglebut it might not work as intended.article componenet master whit tailwind & js vanilla
#tailwind-cssPSubmitted over 1 year agoI didn't understand why giving the class start-0 in Tailwind I couldn't overwrite it with end-0, I solved it by creating a function that removes start-0 but maybe there's a better way. Any suggestions?
meet landing page whit tailwind
#tailwind-cssPSubmitted over 1 year agoTips on how to build the footer in the wide desktop layout (>1024px): I can't understand where I'm going wrong; I can't seem to center the items on the x-axis. Even the footer button breaks and switches to column mode.
testimonial grid section with tailwind, grid and flex-box
#tailwind-cssPSubmitted over 1 year agoHow to create the layout for tablets so that it doesn't break on desktop.
Four card feature section with Tailwind and css Grid
#tailwind-css#accessibilityPSubmitted over 1 year agoThe part where I need the most help is understanding how to import a font into the
input.cssfile, if possible. I've also tried downloading the font, but even in that case, I wasn't able to use it correctly.
