Develop Reference

shrink a sticky div while scrolling down

hey i have in my site a stick div to create a new post
i want this div to animated shrink to a little box the will stick to the header while user scrolls down
and when im pressing on it or scrolling up this div will be visable again
any one can help me how to do this
<form
onSubmit={(e) => {
handleSubmit(e);
}}
className={` top-[106px] z-10 bg-main px-3 pt-2 rounded-lg border border-gray-300`}
>
{titlePost()}
{isPostActive && (
<div className="flex flex-col py-2 ">
<CommunitySelect community={community} setCommunity={setCommunity} />
{textArea()}
{imageBoxOpen && (
<DropzoneComponent
setImages={setImages}
maxImagesLength={maxImageLength}
/>
)}
{createPostButton()}
</div>
)}
</form>```

How to align content of image inside div tailwindscss

This is the current output, as you can see the image inside the circle is not positioned to the center of the circle. object-center is not doing anything.
I tried
// Skill component
function Skill({ directionLeft }: Props) {
return (
{/* Outer div */}
<div className='relative flex cursor-pointer group'>
{/* Inner image */}
<motion.img
className='object-center w-12 h-12 max-w-full border border-gray-500 rounded-full md:h-24 md:w-24 xl:w-32 xl:h-32 filter group-hover:grayscale'
initial={{ x: directionLeft ? -200 : 200, opacity: 0 }}
transition={{ duration: 1 }}
whileInView={{ x: 0, opacity: 1}}
src="typescript.png"/>
</div>
)
}
And these <Skill /> components are used inside here
<div className='grid grid-cols-4 gap-5'>
<Skill />
<Skill />
</div>
EDIT
First bug

object-position: center is used to position elements that have adjusted with the object-size property.
You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit property. MDN
You'll want to center the <img> element from the parent with either Flexbox or Grid. I would recommend the latter using the grid and place-items-center Tailwind utility classes. place-items is a shorthand version of align-items and justify-items.
function Skill({ directionLeft }: Props) {
return (
{/* Outer div */}
<div className='grid place-items-center relative cursor-pointer group'>
{/* Inner image */}
<motion.img
className='object-center w-12 h-12 max-w-full border border-gray-500 rounded-full md:h-24 md:w-24 xl:w-32 xl:h-32 filter group-hover:grayscale'
initial={{ x: directionLeft ? -200 : 200, opacity: 0 }}
transition={{ duration: 1 }}
whileInView={{ x: 0, opacity: 1}}
src="typescript.png"/>
</div>
)
}

Drag and Drop ghost trailing on drop w/React

I am having this problem when I try to reorder elements by dragging them. The reorder works but the functionality of changing places is not performing as desired. When you drag an element/image from a position x to position y it will change the position and it will stay there but on drop handler a "ghost" section it tries to go to the old position and the delete button on the overlay disappears.
I've provided a CodeSandbox link.
This is the component throwing the error.
as oposed to
I tried adding more event handlers like :
onDragOver
onDragDrop
onDragStart
onDragEnter
onDragLeave
and tried to add some logic to metigate the transition of images, but nothing worked.
{imageList.map((image, index, isDragging) => (
<div
key={index}
className="image-item w-1/2 sm:w-40 h-36 sm:p-2 px-1 pt-2"
draggable
onDragStart={(e) => handleDragStart(e, index)}
onDragEnd={(e) => handleDragEnd(e)}
onDragEnter={(e) => handleDragEnter(e, index)}
onDragLeave={(e) => handleDragLeave(e)}
onDragOver={(e) => handleDragOver(e, index)}
onDrop={(e) => handleDrop(e, index)}
>
<div
className={`border relative bg-white h-full transition duration-200 ease-in-out `}
>
{/* //!IMAGE */}
<span
className={` w-full h-full bg-center bg-contain bg-no-repeat `}
style={
{
// backgroundImage: `url(${image.dataURL})`
}
}
>
<img src={image.dataURL} width="200" alt="" />
</span>
{/* OVERLAY */}
<div className="z-10 overlay absolute w-full h-full flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-50">
<div className="flex">
<button
type="button"
onClick={() => onImageRemove(index)}
title=""
>
<span className="w-5 h-5">
<button>delete</button>
</span>
</button>
</div>
</div>
</div>
</div>
))}

Highlight the active nav item on click using Tailwind CSS in React

I have a navigation bar like this:
<nav className="bg-white shadow dark:bg-gray-800">
<div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300">
<Link
to="/home"
className="text-gray-800 transition-colors duration-300 transform dark:text-gray-200 border-b-2 border-blue-500 mx-1.5 sm:mx-6"
>
home
</Link>
<Link
to="/invoices"
className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
>
features
</Link>
<Link
to="/forms"
className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
>
forms
</Link>
<Link
to="/newForm"
className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
>
form2
</Link>
</nav>
I want to change the nav item when it's clicked, but everywhere in Stackoverflow that I've searched I only found solutions for NestJS, Next.js, etc., not React.

You should use active variant on className in tailwindCSS.
for example:
<Link
to="/home"
className="text-gray-300 active:text-blue-500"
>
home
</Link>

You really need to define how you want to determine whether the class is added or not first.
Seems to me you'd want to instead loop through your items:
const isCurrentPage = (href: string) => {
// return true if `href` is the current path, many ways you could do this
}
// loop through your items and conditionally add the class if active...
['/home', '/invoices', '/forms'].map(href => <Link key={href} href={href} className={isCurrentPage(href) ? 'active' : ''} />
Your isCurrentPage function depends on your app logic and setup; you could probably rely on some logic like window.location.pathname.indexOf(href) === 0 to start.

How to display the avatar of all the user but it should have a limit of 6 or 4 then there will be a display all button to display the rest?

I'm creating a component in react that will display the avatar of the user but the catch is there will be limit on how many avatar will show. The solution that I'm thinking is using .slice(0,4).map then I'm gonna make a condition statement that if the length of the list is greater than 4 the button show all will appear. If the user click the button that rest of the user will pop up. The problem is how can display the rest of the user inside the pop up container?
<div className='pl-12 pr-6'>
<div className='flex items-center justify-right'>
{filterInfo &&
filterInfo
.slice(1, 10)
.map((data) => (
<img
className={`mr-2 rounded-full border-1px ${
active === data.creator[0]._id
? 'border-primary p-0.5 opacity-100'
: ''
} cursor-pointer transition duration-75 ease-in opacity-70`}
key={data._id}
id={data.creator[0]._id}
src={data.creator[0].accountProfileUploaded}
alt={`${data.creator[0].firstName} ${data.creator[0].lastName}`}
title={`${data.creator[0].firstName} ${data.creator[0].lastName}`}
style={{ width: '40px', height: '40px' }}
onClick={handleOnFilterByProfile}
/>
))}
{filterInfo && filterInfo.length >= 2 ? (
<div
className='shadow-md rounded-full relative'
style={{ width: '40px', height: '40px' }}
>
<ChevronDoubleDownIcon
className='h-4 w-4 absolute mt-3.5 ml-3 opacity-60 cursor-pointer hover:text-primary'
aria-hidden='true'
/>
</div>
) : null}
</div>
</div>
Thanks!