Develop Reference

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}>
[...]

I have to click 2 times to the link in mobile view of my Next JS application in order to change routes

I am building a Next JS application,
On the desktop view, there is no problem, but when it changes to the mobile view after a scroll event or changing routes when I want to click on a link/button, etc. I need to click two times on it. I am suspicious that after an event, the focus on the page is being lost, but there is no overflow or something. I couldn't figure out where the focus was gone.
Here is an example of my code
<Link href={storyUrl}>
<a className="group inline-flex flex-col mb-4 md:mb-11 space-y-2 ">
<div className="flex items-center gap-2">
{isDeleted && (
<div className="group">
<Info className="text-slate-400" />
<div className="hidden rounded-lg p-2 text-xs bg-gray-100 absolute z-50 group-hover:block shadow-md w-48 mt-5">
This story has been deleted or in draft
</div>
</div>
)}
{draft && (
<span className="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-purple-50 text-purple-800">
Draft
</span>
)}
<h2
className={`text-slate-900 text-3xl font-semibold leading-9 tracking-md transition ease-in-out duration-150 group-hover:text-purple-700 ${
isDeleted ? 'line-through' : ''
}`}
>
{title}
</h2>
</div>
<p className="text-slate-500 text-sm tracking-sm line-clamp-2 break-words w-full xl:w-[600px] ">
{infoText}
</p>
</a>
</Link>
Thanks for any responses in advance
I tried to change the Links to the router.push but as I thought it was irrelevant.

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.

How to keep div size when showing submenu on top Tailwind and React

Using Tailwind an React - When clicking on an icon I show a submenu but it happens that when the container div is shown it becomes bigger in its height automatically.
How can I display this submenu on top of the other elements so that it doesn't make its container div bigger? I tried with fixed but it moves from the place I require it to be displayed.
This is the code:
Table where I show the submenu when clicking:
<div className="flex flex-wrap m-5 mx-auto w-full pr-2 pl-2">
<div className="w-full px-4">
<div className="flex flex-wrap">
<div className="flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white">
<div className="block w-full overflow-x-auto">
<table className="items-center w-full bg-transparent border-collapse">
<thead className="bg-sky-50">
<tr>
<th className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold bg-blueGray-50 text-blueGray-500 border-blueGray-100">
Opciones
</th>
</tr>
</thead>
<tbody>
<tr className="hover:bg-slate-100">
<td className="border-t-0 px-6 align-middle border-l-0 text-center border-r-0 text-xs whitespace-nowrap p-4">
<div>
<OptionsDropDown
showDropdown= { showDropdown }
setShowDropdown = { setShowDropdown }
dataDropDown= { dataDropDown }
/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
Menu Component, Here I have the icon and what I show when I click on it but it widens the parent div:
<div className="flex justify-center">
<button ref={ref}
className="flex items-center
text-black py-2 px-2
text-2xl hover:text-cyan-700"
onClick={ ()=> setShowDropdown(!showDropdown) }>
<FiMoreVertical/>
</button>
{
showDropdown && (
<div className="relative bg-white text-base z-50 py-2 rounded shadow-lg">
{
dataDropDown.map( (option, index) => (
<div key={index}>
{option.edit}
{option.delete}
</div>
))
}
</div>
)
}
</div>
Here is a screenshot of what it looks like right now on click, making the size of the parent div higher:
Here it is before clicking:
Clicking the container div makes it wide:
Using abosulte on submenu

You're most likely looking for absolute positioning using a relative positioning on the direct parent so that the position of the absolute element is anchored to its immediate parent.
Something like this should work:
<div className="relative flex justify-center">
{/* NOTE: the relative positioning above */}
<button ref={ref}
className="flex items-center
text-black py-2 px-2
text-2xl hover:text-cyan-700"
onClick={ ()=> setShowDropdown(!showDropdown) }>
<FiMoreVertical/>
</button>
{
showDropdown && (
<div className="absolute right-0 top-1/2 -translate-y-1/2 bg-white text-base z-50 py-2 rounded shadow-lg">
{/* which allows this to anchor */}
{
dataDropDown.map( (option, index) => (
<div key={index}>
{option.edit}
{option.delete}
</div>
))
}
</div>
)
}
</div>
although I expect you'll have to tweak it slightly to get the results that you want. It might also be worth looking into the blur event to automatically hide the popup once it loses focus.

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;