Smaylen5
@Smailen5All solutions
Ecommerce with React and Tailwind v 4.0.6
#framer-motion#react#tailwind-css#vite#react-routerPSubmitted 30 days 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 6 months agoAll feedback welcome 😃
Faq accordion accesibility
#accessibility#react#shadcn#typescript#tailwind-cssPSubmitted 6 months agoAny feedback is welcome 😉
Frontend quiz whit Typescript
#accessibility#react#tailwind-css#typescript#react-routerPSubmitted 6 months agoAny feedback is welcome! 😉
skilled elearning whit tailwind, shadcn ui, typescript and react
#react#shadcn#tailwind-css#typescript#vitePSubmitted 7 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 8 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 8 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 8 months agoPassword generator whit Tailwind and JavaScript vanilla - only desktop
#tailwind-cssPSubmitted 11 months 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 11 months 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 12 months 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 12 months 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 12 months 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 12 months 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 12 months 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 about 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.recipe page with Tailwind
#tailwind-cssPSubmitted about 1 year agoI think I need to study thoroughly how dependencies work and how to modify defaults in Tailwind.
social link profile whit Tailwind
#tailwind-cssPSubmitted about 1 year agoHow could I reduce the number of classes used to clean up the HTML file?
Blog preview card solution only html and css
PSubmitted about 1 year agoUsing a preprocessor like SASS or Tailwind CSS.
Main component of the 3 column preview tab with html5 and css
#accessibilityPSubmitted over 1 year ago
