Develop Reference

Next.js Link not working on mobile, it works fine on desktop however on mobile its not clickable, tried router.push(`portfolio/${proj.slug.current}`)

return (
<div className="w-full">
{project.map((proj: projTypes, index: any) => {
return (
<div
key={index.toString()}
className="border-b border-b-slate-100 bg-white bg-no-repeat overflow-hidden"
>
<div className="flex flex-col lg:flex-row grow text-center lg:text-left py-10 text-green items-center justify-between h-full">
<div>
<button
onClick={() => router.push(`portfolio/${proj.slug.current}`)}
className="text-[25px] lg:text-[44px] font-bold font-display ease-in-out duration-300"
>
{proj.title}
</button>
</div>
<div className="flex w-1/3 gap-x-5 justify-center ease-in-out duration-900">
<p className="ease-in-out duration-700 text-[14px] uppercase text-gray font-bold">
{proj.category}
</p>
<p className="ease-in-out duration-700 text-[14px] uppercase text-gray font-bold">
{proj.year}
</p>
</div>
</div>
</div>
);
})}
</div>
expected clickable items on mobile

fixed element not filling the full width of the screen tailwind

I'm trying to fill the width of a fixed element in Tailwind to full width.
here's a screenshot of the modal:
Modal Screenshot
please ignore the text inside it as I'm still testing stuff out.
my code React:
import { Dialog, Transition } from '#headlessui/react'
import { Fragment, useState } from 'react'
import { Link } from 'react-router-dom'
export default function Modal2() {
let [isOpen, setIsOpen] = useState(true)
function closeModal() {
setIsOpen(false)
}
function openModal() {
setIsOpen(true)
}
return (
<>
<div className=" absolute right-1 top-5 p-2">
<button
type="button"
onClick={openModal}
className="flex rounded-3xl pl-6 pr-6 bb p-2 "
>
Open dialog
</button>
</div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10 " onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed flex inset-0 bg-black bg-opacity-80 blur2 " />
</Transition.Child>
<div className="fixed top-20 right-2 overflow-y-auto ">
<div className="flex justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="mb-10 w-full max-w-md transform overflow-hidden rounded-3xl bg-white p-6 text-left align-top shadow-xl transition-all">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
Lorem, ipsum dolor.
</Dialog.Title>
<div className="mt-2">
<p className=" flex flex-col text-md text-gray-500">
<Link to={"/about"} className="py-1 ">dada</Link>
<span className='h bg-red-600'></span>
<Link className="py-1 " to={""}>dada</Link>
<span className='h bg-red-600'></span>
<Link className="py-1 " to={""}>dada</Link>
<span className='h bg-red-600'></span>
<Link className="py-1 " to={""}>dada</Link>
</p>
</div>
<div className="mt-4">
<button
type="button"
className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={closeModal}
>
Got it, thanks!
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</>
)
}
this is the line that opens the Modal. I want to make the width stretch to full-screen width. :
<div className="fixed flex inset-0 bg-black bg-opacity-80 blur2 " />
I would appreciate any help.
I tried to use items-stretch and w-full. didn't work. I guess its because it's fixed.

I couldn't reproduce your problem exactly, so this might be off.
If I understand your goal correctly, you're targeting the wrong element. The Dialog component contains your modal, so that's the component which should
have display: flex and justify-content: center to centralize the modal horizontally.
So you should add the classes flex and justify-center to the Dialog component. You can also add items-center to centralize it vertically.
[...]
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10 flex justify-center" onClose={closeModal}>
[...]

Make Submenu on sidebar component Nextjs

So it to loop and subMenu on sidebar component, but instead of the subMenu showUp under the parents menu, it showUp on the Right side of the parents menu as pic below:
here is my code on how i try to loop the subMenu and The parents item to the react component:
return (
<div className=" my-4 border-gray-100 pb-4">
{items.map(({ icon: Icon, iconArrow: IconArrow, ...item }, index) => {
if (item.subMenu) {
return (
<div>
<Link href={item.link}>
<a
onClick={(e) => onMouseClick(e, item.link)}
className="flex mb-2 justify-start items-center gap-4 pl-5 hover:bg-gray-900 p-2 rounded-md group cursor-pointer hover:shadow-lg m-auto"
>
<Icon className="text-2xl text-white group-hover:text-red" />
<h3 className="text-base text-white group-hover:text-red font-semibold ">
{item.label}
</h3>
{item.subMenu && dropdown ? (
<>
<IconArrow className="pl-0 text-2xl text-white group-hover:text-red" />
</>
) : (
<></>
)}{" "}
{item.subMenu && dropdown ? (
<div>
{item.subMenu.map((subitem, index) => {
return <>makan</>;
})}
</div>
) : (
<></>
)}
</a>
</Link>
</div>
);
} else {
return (
// eslint-disable-next-line react/jsx-key
<div>
<Link href={item.link}>
<a
onClick={(e) => onMouseClick(e, item.link)}
className="flex mb-2 justify-start items-center gap-4 pl-5 hover:bg-gray-900 p-2 rounded-md group cursor-pointer hover:shadow-lg m-auto"
>
<Icon className="text-2xl text-white group-hover:text-red" />
<h3 className="text-base text-white group-hover:text-red font-semibold ">
{item.label}
</h3>
</a>
</Link>
</div>
);
}
})}
</div>
);
};
Can Some one tell me where did i do wrong here, here is where i call the sidebar component into the sidebar:
return (
<div className="h-full px-4 pt-8 bg-yellow flex flex-col peer-focus:left-0 peer:transition ease-out delay-150 duration-200">
<div className="flex flex-col justify-start item-center mb-4">
<Image src={Logo_Nabati} width={123} height={75} alt="logo Nabati" />
</div>
<Sidebarcomponent items={menuItems} />;
</div>
);

try this:
return (
<div className=" my-4 border-gray-100 pb-4 relative">
{items.map(({ icon: Icon, iconArrow: IconArrow, ...item }, index) => {
if (item.subMenu) {
return (
<div className="absolute top-full left-0">...</div>
);
} else {...})}
</div>
);
};

I assume you want to display the submenu under the "Master Data"? Put the component under it. Then in the anchor tag you have a flex. Add flex-col to change the direction of flex, top-bottom.

Z-Index not working in Tailwind CSS React JavaScript

How can make the calendar pop up? I am using tailwind CSS, it won't work. I tried to follow the documentation about the z-index.
This is my main homepage. And it's arranged completely.
const Homepage = () => {
return (
<div>
<Navbar />
<Header />
<UnderHeader />
<div className="mt-14 flex flex-col items-center gap-8">
<Featured />
</div>
</div>
)
}
This is UnderHeader.jsx where the content of search box, date etc.
return (
<div className="w-screen h-80 max-h-7xl drop-shadow-lg ">
<div
className="w-full h-full mt-5 bg-no-repeat bg-cover bg-center opacity-100 bg-neutral-800 bg-blend-overlay flex items-center justify-center "
style={{ backgroundImage: `url(${BackgroundIsland})` }}
>
<div className="flex items-center justify-evenly p-4 w-3/4 h-16 text-lg border-2 border-white/[.2] bg-white/[.08] rounded-full">
<div className="flex gap-3 items-center justify-center text-white">
<FaBed size={36} className="" />
<input
type="text"
placeholder="Location..."
className="px-3 border-b-2 py-1 text-dark focus:outline-none w-72 bg-transparent cursor-pointer"
/>
</div>
<div className="flex gap-3 cursor-pointer text-white items-center relative z-50 justify-center">
<FcCalendar size={36} className="text-white" />
<p onClick={() => setOpenDate(!openDate)}>
{`${format(date[0].startDate, 'MM/dd/yyyy')}`}
<span className="mx-2 font-thin">to</span>
{`${format(date[0].endDate, 'MM/dd/yyyy')}`}
</p>
{openDate && (
<DateRange
editableDateInputs={true}
onChange={(item) => setDate([item.selection])}
moveRangeOnFirstSelection={false}
ranges={date}
className="absolute top-[50px]"
/>
)}
</div>
<div className="flex gap-3 text-white items-center justify-center relative">
<HiUserGroup size={36} className="" />
<p
className="cursor-pointer"
onClick={() => setOpenOptions(!openOptions)}
>{`${options.adult} adult • ${options.children} children • ${options.room} room`}</p>
{openOptions && (
<div className="absolute top-[50px] bg-white text-gray-800 rounded-sm px-3 py-4 drop-shadow-2xl">
{/* This is person choose */}
<ButtonHeader
title="Adult"
buttonName="adult"
quantity={options.adult}
handleOption={handleOption}
/>
<ButtonHeader
disabled={options.children <= 1}
title="Children"
buttonName="children"
quantity={options.children}
handleOption={handleOption}
/>
<ButtonHeader
disabled={options.room <= 1}
title="Room"
buttonName="room"
quantity={options.room}
handleOption={handleOption}
/>
</div>
)}
</div>
<div className="flex gap-1 cursor-pointer bg-blue-200 hover:bg-blue-300 duration-300 rounded-full px-4 py-3 items-center justify-center">
<FcSearch size={24} className="" />
<p className="text-lg font-bold">Search</p>
</div>
</div>
</div>
</div>
)
This is featured.jsx that contains the image, which, and it is under the header.jsx
const Featured = () => {
return (
<div className="w-full max-w-5xl flex justify-between gap-4 ">
<div className="w-full object-cover relative">
<img
src="https://images.unsplash.com/photo-1472213984618-c79aaec7fef0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=855&q=80"
alt=""
className="w-full object-fit z-[1]"
/>
<div className="text-white rounded-lg h-64 absolute bottom-4">
<p className="text-5xl absolute">Dublin</p>
<p className="text-5xl absolute">123 Properties</p>
</div>
</div>
</div>
)
}
export default Featured
live demo: https://booking-ui-sand.vercel.app/
repo: https://github.com/Zurcemozz/bookingUI

I don't know if this is a great approach, I inline code the CSS to the feature and make it negative. is there any way to apply it in tailwind CSS?
const Featured = () => {
return (
<div className="w-full max-w-7xl flex justify-space-between gap-4 ">
<div
className="relative text-white drop-shadow-lg h-64"
style={{ zIndex: -1 }}
>
<img
src="https://images.unsplash.com/photo-1511515828069-1e4853d8b336?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80"
alt=""
className="w-full object-cover"
/>
<div className="absolute bottom-5 left-4">
<p className="text-7xl">Dublin</p>
<p className="text-5xl">123 Properties</p>
</div>
</div>
</div>
)
}
export default Featured

Tailwind allows the use of negative values. You could try to use the class -z-10 instead of using the inline style.

Make div align to bottom of column in card tailwind css

As the title states, I am trying to get a div within a parent div to align across columns using Tailwind CSS. However, they are not aligning due to different image sizes uploaded to each column. I do not want to resize the images. I have circled in red the divs I want aligning at the bottom. Github Repo
I have tried the different settings referenced here
The specific child div that I would like aligned is from <div className="p-4 bg-black">
I was wondering if anyone could assist?
return (
<div className="flex justify-end">
<div className="px-4" style={{ maxWidth: '1600px' }}>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
{
nfts.map((nft, i) => (
<div key={i} className="border shadow rounded-xl overflow-hidden">
<img src={nft.image} />
<div className="p-4">
<p style={{ height: '64px' }} className="text-2xl font-semibold">{nft.name}</p>
<div style={{ height: '70px', overflow: 'hidden' }}>
<p className="text-gray-400">{nft.description}</p>
</div>
</div>
<div className="p-4 bg-black">
<p className="text-2xl mb-4 font-bold text-white">{nft.price} Matic</p>
<button className="w-full bg-pink-500 text-white font-bold py-2 px-12 rounded"
onClick={() => buyNft(nft)}>Buy</button>
</div>
</div>
))
}
</div>
</div>
</div>
)
}

You can wrap your top content in an element and apply CSS flexbox to the parent element.
flex - applies CSS flexbox
flex-col applies CSS flex-direction: column which stacks the child elements vertically
justify-between applies CSS justify-content: space-between, which tells the element to distribute children evenly. The first and last child elements will be at the furthest ends of the parent element (beginning and end). Since the element has flex-col, the ends will be the top and bottom of the element.
flex-1 applies CSS flex: 1, which makes all the child elements fill to the parent's size; in this case, it will make the children all the same height.
Align details and images to the top and the buying info to the bottom
<div className="flex flex-1 flex-col justify-between">
<div>//must wrap content to be aligned to top
<img src={image} />
<p>{nft.name}<p>
<p>{description}</p>
</div>
<div>//must wrap content to be aligned to bottom
<p>{price} Matic</p>
<button>Buy</button>
</div>
</div>
Additional example - this will have all of the images at the top and all of the content at the bottom
<div className="flex flex-1 flex-col justify-between">
<img src={image} /> // aligned top
<div>// aligned bottom
<p>{name}<p>
<p>{description}</p>
<p>{price} Matic</p>
<button>Buy</button>
</div>
</div>

I am using tailwind CSS with react. It might help you.
First Code:
Firstly iterating to the fetch data from the useEffect section with tailwind CSS grid concepts. I am using 3 cols for large devices, 2 cols for medium devices, and 1 col for small devices.
import React, { useEffect, useState } from 'react';
import SellingCard from '../SellingCard/SellingCard';
const BestSelling = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch('data.json')
.then((res) => res.json())
.then((data) => setProducts(data));
}, []);
return (
<div
style={{ maxWidth: '1300px' }}
className="my-10 md:my-20 mx-auto container px-4"
>
<h4 className="text-center text-lg font-normal text-red-500 my-2">
CHECK IT OUT
</h4>
<h1 className="text-center text-4xl md:text-5xl font-mono tracking-wide font-bold">
Best Sellers
</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{products.slice(0, 6).map((product) => (
<SellingCard key={product.id} product={product} />
))}
</div>
</div>
);
};
export default BestSelling;
Second Code:
I just give a fixed height ["style={{ height: '500px' }}"] of the card and make the display property "relative" of the card main div. Then I added display "absolute" and "bottom-0" for the div a which I just want to fix at the bottom of the card.
import React from 'react';
const SellingCard = (props) => {
const { img, name, price, quantity, sup_name, des } = props.product;
return (
<>
<div>
<div
style={{ height: '500px' }}
className="rounded relative shadow-sm"
>
<img
className="h-60 rounded w-full object-cover object-center mb-6"
src="https://dummyimage.com/722x402"
alt="content"
/>
<h3 className="tracking-widest text-red-500 text-xs font-medium title-font">
Suplier: {sup_name}
</h3>
<h2 className="text-lg text-gray-900 font-medium title-font mb-4">
{name}
</h2>
<p className="leading-relaxed text-base mb-2 flex-1">
{des.slice(0, 150)}
</p>
<div className="absolute bottom-0 w-full">
<div className="flex justify-between items-center relative bottom-0 text-red-600 text-lg font-bold mb-2">
<p>Price: {price}</p>
<p>Items Left: {quantity}</p>
</div>
<button className="w-full text-center bg-blue-600 py-2 rounded text-white font-bold hover:bg-blue-800">
Update This Product
</button>
</div>
</div>
</div>
</>
);
};
export default SellingCard;