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;
Related
I have a login and a home page, they both share the same colors, but on the login form the color is not applied like it is on the home page.
Here is my Login.jsx page:
<div className="App">
<div className="flex items-center justify-center min-h-screen">
<div className="px-8 py-6 mt-4 text-left bg-white shadow-lg rounded-lg shadow-2xl bg-egloback1">
<h3 className="text-2xl text-white font-bold text-center">Login</h3>
{Status === false && (
<p className="text-center text-red-900 mt-3">{data.error}</p>
)}
<div className="mt-4">
<div>
<input type="email" placeholder="Email"
className="w-full px-4 py-2 mt-2 focus:outline-0 caret-white text-white bg-egloinput1 border border-transparent rounded-md focus:outline-none focus:ring-1 focus:ring-[#9441f2] duration-300" onChange={event => setEmail(event.target.value)} value={Email} />
</div>
<div className="mt-4">
<input type="password" placeholder="Password"
className="w-full px-4 py-2 mt-2 focus:outline-0 caret-white text-white bg-egloinput1 border border-transparent rounded-md focus:outline-none focus:ring-1 focus:ring-[#9441f2] duration-300" onChange={event => setPassword(event.target.value)} value={Password} />
</div>
<div className="flex items-baseline justify-between">
<button className="px-6 py-2 mt-4 text-white bg-eglobutton1 rounded-lg hover:bg-eglobutton2 duration-300" onClick={Login}>Login</button>
Forgot password?
</div>
</div>
</div>
</div>
</div>
And this is what it renders as:
But on my Home.jsx page (which shares the same colors and files as the Login page) it looks like this (which is how it is supposed to look, the squares/rectangles are the correct color, and are what the login page box should look like):
Here is my Home.jsx code:
<LoadingOverlay active={isActive} fadeSpeed={400} spinner styles={{
spinner: (base) => ({ ...base, width: '30px', '& svg circle': { stroke: 'rgba(255,255,255,255)' } }),
overlay: (base) => ({ ...base, background: 'rgba(17,17,17,1)' }), wrapper: { width: '100%', height: '100%' }
}}>
<div className="App">
<Sidebar />
<p className="select-none text-center mt-16 text-4xl underline decoration-1 underline-offset-8">Welcome, {data.name}</p>
<p className="animate-pulse select-none font-mono text-center mt-3 text-sm">You have {data.notification_count} notifications</p>
<div className="flex justify-center items-center h-[200px] mt-[80px]">
<div className="rounded-lg bg-egloback1 w-48 h-[120px] m-[5px]">
<p className="text-center mt-[49px]">No favourite 1</p>
</div>
<div className="rounded-lg bg-egloback1 w-48 h-[120px] m-[5px]">
<p className="text-center mt-[49px]">No favourite 2</p>
</div>
</div>
<div className="flex justify-center items-center mt-[-70px] h-[200px]">
<div className="rounded-lg bg-egloback1 w-[395px] h-[120px] m-[5px]">
<p className="text-center mt-1">Announcements:</p>
</div>
</div>
</div>
</LoadingOverlay>
And for reference here is the tailwind.config.cjs file with the custom colors:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
colors: {
egloback1: '#1e1e1e',
eglobutton1: '#9441f2',
eglobutton2: '#761fdb',
egloinput1: '#303030'
},
},
},
plugins: [],
}
And for reference again here is my App.css file:
#tailwind base;
#tailwind components;
html {
padding: 0px;
margin: 0px;
background-color: #111111;
-webkit-backface-visibility: hidden;
}
p, s, i, b {
color: white;
}
body::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#tailwind utilities;
I tried embedding the color codes directly instead of using the config file (like bg-[#00000f], instead of bg-egloback1) which did not work, I tried restarting the development server and changing the import orders of my CSS file for the project, which also did not work.
Strangely enough, whenever I change the name of the color from egloback1 to something different in both the config and app files, the color is correct for a few minutes, then it goes back to white.
SOLUTION:
I figured out the solution to this issue. It was an issue with the DIV not rendering everything properly? It seems to be a weird TailwindCSS bug, but I found a workaround:
<div className="flex items-center justify-center min-h-screen">
<div className="px-8 py-6 mt-4 text-left bg-white shadow-lg rounded-lg shadow-2xl bg-egloback1">
I replaced that code with:
<div className="flex flex-row min-h-screen justify-center items-center">
<div className="rounded-lg bg-egloback1 w-[290px] h-full p-7 m-[5px]">
Those both center the DIV in the middle of the screen, and I have not had any issues with the bottom one. Just an annoying TailwindCSS bug :p
I copy pasted your entire code into a project and it seems to work perfectly fine. Can you try this?
Move these lines at the start of the index.css file from App.css.
#tailwind base;
#tailwind components;
#tailwind utilities;
Here is how Login.jsx code renders on my end.
I have this jsx here and I am using tailwindcss. with this code i have basically just made this:
this post info bar
<div className="flex items-center space-x-1 group">
<div className="icon group-hover:bg-[#1d9bf0] group-hover:bg-opacity-10 cursor-pointer">
<ChatBubbleOutline className="h-5 group-hover:text-[#1d9bf0]" />
</div>
</div>
{user?.tag === post?.tag ? (
<div
className="flex items-center space-x-1 group"
onClick={(e) => {
e.stopPropagation();
deleteDoc(doc(db, "posts", id));
router.push("/");
}}
>
<div className="icon group-hover:bg-red-600/10">
<TrashIcon className="h-5 group-hover:text-red-600" />
</div>
</div>
) : (
<div className="flex items-center space-x-1 group">
<div className="icon group-hover:bg-green-500/10">
<SwitchHorizontalIcon className="h-5 group-hover:text-green-500" />
</div>
</div>
)}
<div
className="flex items-center space-x-1 group"
onClick={(e) => {
likePost();
}}
>
<div className="icon group-hover:bg-pink-600/10">
{liked ? (
<HeartIconFilled className="h-5 text-pink-600" />
) : (
<HeartIcon className="h-5 group-hover:text-pink-600" />
)}
</div>
{post?.likes?.length > 0 && (
<span
className={`group-hover:text-pink-600 text-sm ${
liked &&
"text-pink-600"
}`}
>
{post?.likes.length}
</span>
)}
</div>
<div className="icon group">
<ShareIcon className="h-5 group-hover:text-[#1d9bf0]" />
</div>
</div>
Everything is working, and looks great, but for some reason, the first element in the flex div at the top is non clickable and there is no hover animation. The ChatBubbleOutline icon when hovered doesnt have any css showing and the onclick listener doesnt work, but every other icon after than does perfectly, why is this? And a strange thing is that when i go into md screen size or lower it works completly as i want it to but in xl screen size for a normal screen it doesnt work.
Here is the my css file
#layer components {
.hoverAnimation {
#apply hover:bg-[#d9d9d9] hover:bg-opacity-10 rounded-full cursor-pointer w-[52px] h-[52px] xl:w-auto xl:h-auto xl:py-3 xl:px-4 transition duration-200 ease-out;
}
.icon {
#apply cursor-pointer w-9 h-9 hover:bg-[#1d9bf0] hover:bg-opacity-10 flex items-center justify-center rounded-full transition ease-out;
}
}
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.
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.
enter image description here
I wanted to create useEffect variables and put it to true/false when user hovers on parent div.
I want to use that hover variable in a child div with image and resize image when user hovers on parent div with id="infoCard".
Code-
const [hover, setHover] = useState(false);
<div
className="flex flex-col md:flex-row font-inter py-7 px-2 border-b rounded-xl cursor-pointer hover:shadow-lg pr-6 transition duration-200 ease-out first:border-t hover:bg-red-100 mb-2"
id="infoCard"
>
<div className="relative h-40 w-64 md:h-52 md:w-80 flex-shrink-0 ml-6">
<Image
src={img}
layout="fill"
objectFit="cover"
className={`rounded-2xl scale-95 ${hover ? "scale-100" : ""
} transform transition duration-200 ease-out`}
/>
</div>
<div className="flex flex-col flex-grow pl-5 ml-2 mt-2 md:mt-0">
<div className="flex justify-between">
<p>
{location} {city}
</p>
<HeartIcon className="h-7 cursor-pointer" />
</div>
<h4 className="text-xl">{title}</h4>
<div className="border-b w-10 pt-2" />
<p className="pt-2 text-sm text-gray-500 flex-grow">
{numberOfGuest}
{description}
</p>
<div className="flex justify-between items-end">
<p className="flex items-center">
<StarIcon className="h-5 text-red-400" />
{star}
</p>
<div>
<p className="text-lg pb-2 font-semibold lg:text-2xl">{price}</p>
<p className="text-right font-light">{total}</p>
</div>
</div>
</div>
</div>
You could do this without the hover state with just CSS. Take a look at the documentation on group-hover classes here. They work like this:
<div class="group">
<img class="transform scale-95 group-hover:scale-100" />
</div>
Here's a minimal example of how you could do this. Note that you also need to extend the variants of the scale classes in the tailwind.config.js file as it's not included by default.
As a side note: You don't typically use jQuery in a React-based projects. If you need to detect hover, React has built-in mouse events. Read more here.