CODEWITHSUNDEEP
reactjstailwind-css
Jagannath Krishna.P.A
Jagannath Krishna.P.A

Reputation: 380

How to align an image right to an image using Tailwind CSS?

I am building a website with react ad tailwind. But I am having a problem aligning an image : enter image description here

I need the smaller image to be in the right of the bigger image. I tried so much to align it there but I can't. Here is my code

Tailwind CSS :

.banner-image {
  @apply   flex mt-24 ml-10 w-max rounded-lg
}
.side-image{
  @apply flex mt-24 ml-10 float-right w-48 rounded-lg mr-96
}

React :

function Banner() {
  return <div >
    <div>
      <img className='banner-image' src="https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt="" />
    </div>
    <div>
      <img className='side-image' src="https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="" />
    </div>
  </div>;
}

How do I solve it??

Upvotes: 0

Views: 3980

Answers (2)

amlxv
amlxv

Reputation: 2005

Remove float-right class.

.banner-image {
  @apply flex mt-24 ml-10 w-max rounded-lg;
}
.side-image {
  @apply flex mt-24 ml-10 w-48 rounded-lg mr-96;
}

Add flex class to the div wrapper.

function Banner() {
  return (
    <div className='flex'>
      <div>
        <img
          className='banner-image'
          src='https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60'
          alt=''
        />
      </div>
      <div>
        <img
          className='side-image'
          src='https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60'
          alt=''
        />
      </div>
    </div>
  );
}

Upvotes: 2

patil09
patil09

Reputation: 11

well... in your code you have two different classes for each image, and you want them to be in one line, for that you need to insert both the images in one container and then style them. and that would solve it.

function Banner() {
  return <div >
    <
    div >
    <
    img className = 'side-image'
  src = "https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
  alt = "" / >

    <
    img className = 'banner-image'
  src = "https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
  alt = "" / >
    <
    /div> <
    /div>;
}

Upvotes: 0

Related Questions