I want the image to be at the top left corner but I am not able to do it in tailwind and next

Question

I want to add my image to the top right corner but I am not able to add it. Pls help me in finding the error.

import Image from "next/image";

function Header() { return (

    {/* left */}
    <div className='relative flex items-center h-10 cursor-pointer my-auto grid-cols-3 bg-black'>
        {/* objectfit prevents from stretch of the image*/}
        <Image 
            src='https://links.papareact.com/qd3'
            layout="fill"
            objectFit="contain" 
            objectPosition="left"
        />
    </div>

    {/* Middle */}
    <div></div>

    {/* Right */}
    <div></div>
</header>

) }

export default Header

Answer 1

Simply change the objectPostion: "right". Your image will be placed right

Answer 2

You have used flex so you can align to right by adding justify-end. Also you can make layout=responsive. And add className = "w-20 h-6" to either or a wrapping the image which gives the image proper size.

Here's the working code

<script src="https://cdn.tailwindcss.com"></script>
<div class='relative flex items-center justify-end h-10 cursor-pointer my-auto grid-cols-3 bg-black'>

        <Image
            src='https://links.papareact.com/qd3'
            layout="responsive"
            objectFit="contain"
            objectPosition="right"
            class="h-6 w-20 mr-2"
        />
</div>

 
<div></div>


<div></div>