I have this layout that I am trying to build: I am struggling to figure out how I can use display: flex or display: grid to achieve the result. The criteria here is: There are only two items per row…
Using the tailwind elements library, I am not able to listen to changes on the time picker as defined: const MyTimePicker = () => { useEffect(() => { initTE({ Timepicker, Input }); }, []); // get data from timepicker const…
I have a Carousel Object which contains Buttons. These buttons represent the "Semester" content that is shown below (an image is provided below). I want the "semester 1" button to be Dark Blue by default and when another button is…
I have the below: <div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4"> {status === "success" && delve(data, "restaurants") && data.restaurants.map((restaurant, index) => ( <div className=""> <---------------- i.e. <RestaurantCard {...restaurant.attributes} locale={locale} key={index} /> </div> ))} </div> I want to apply a…
I am trying to show and hide a navbar based on whether a variable is set to true or false. I am able to get the Navbar to show/hide however, my problem happens when I try to set the Navbar…
i have this error during the installation of tailwind installation with react the error is this : npm i tailwind postcss autoprefixer npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '[email protected]', npm WARN EBADENGINE required: { node: '>=0.8…
It's only been a few days since I started learning next.js. As for now, I can't figure out how to fetch data from api. In plain react, I used useState and useEffect to control and fetch data. But what about…
I have made one page in my project, it's App.tsx and it contains a lot of components. like this: import React from 'react'; import './App.css'; import Header from './components/Header'; import Underline from './components/Underline'; import BodyPart from './components/BodyPart'; import Footer from…
This is what I want to achieve Basically, 2 rows, an input box takes the first row. The second row should take up the rest of the height. I used flex box with grow to do this. The second row…
I'm trying to build a basic website as my first project using React and Tailwind CSS. I have made three components namely - Header, Input and Footer in my react app. My header is placed at the top by default.…