I use React, NextJS and Tailwind. I want to use some images as background for some cards elements. I first store the images names in an array. const symbols = ['boat_2.png', 'boat.png', 'tortue.jpg', 'surf.jpg']; Then I map the array and…
App.jsx import React, { useState } from "react"; import Pokemon from "./Pokemon"; import Pagination from "./Pagination"; import PokemonList from "./PokemonList"; function App() { const [nextPage, setnextPage] = useState( "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20" ); const [previousPage, setPreviousPage] = useState(); const [CurrentPage, setCurrentPage] = useState(…
I've uploaded my first React component to NPM. It's a slider with ticks (fractions) that you can drag. Here's the link: Fractional Range Slider NPM I've made it up with TailwindCSS. When it is bundled, it generates all the classes…
I have a problem with shadcn's <FormLabel>. How do prevent it from showing a color of red (It actually add a text-destructive automatically) when a field has error/required. I only want the <FormMessage/> to change the color. <FormField control={form.control} name="name"…
I am curious if anyone can get 100% of these requirements working together, I can only get 80% (#4 is a pain): The header always stays at the top of the page. The footer always stays at the bottom of…
I have some buttons styled with TailwindCSS. These buttons contains some icons / helper text (<span>) that should receive a color (different than the color used for button text) when the mouse is over the button. I used the group…
I made the FB login page clone using Tailwind CSS and it works fine on my local machine, but when I deploy it to GitHub pages it shows me errors. It worked well on Netlify but it's giving errors on…
The site (written in React, using Typescript and Tailwind) has a modal window. Modal is implemented using the "react-modal" library https://reactcommunity.org/react-modal/ . With standard browser window sizes, there are no problems with a modal window. However, if the user resizes…
I have a section that extends beyond the page on either side and need to reduce the width of the column containing text for smaller screens. I reduced it to 70% and it works great on the right half, but…
So I want to create a grid or flexbox layout which looks something like this . So all of the data inside each box of the image is dynamic so i am not sure about the size of every box.…