CODEWITHSUNDEEP
htmlcsstailwind-csstailwind-3
Jakub
Jakub

Reputation: 1

How to position image on top with tailwind?

How to archive the below example?

I have been trying to use relative and absolute positioning but am not sure how to center absolute properties.

Image on top of background

<div class="relative h-64 m-8 overflow-hidden bg-indigo-500  rounded-lg">
  <div class="absolute  flex w-full h-full">
    <div class="relative z-30 w-5/6 px-6 py-8 text-white md:py-10 md:w-1/2">
      <h2 class="text-5xl">Tailwind responsive header</h2>
      <span></span>
    </div>
    <div class="absolute  right-0 flex w-full  h-full">
      <div class="w-1/3 h-full bg-indigo-500"></div>
      <div class="relative w-1/3">
      </div>
    </div>
  </div>

  <div class="absolute  right-0 yop-4 block w-5/12 m- right-0">
    <img alt="Snowy mountain lake" class="object-cover h-full min-w-full object-scale-down h-48 w-96" src="https://images.unsplash.com/photo-1607025952930-da2ac6748e7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
    />
  </div>
</div>

<script src="https://cdn.tailwindcss.com"></script>

Upvotes: 0

Views: 1264

Answers (2)

khusbu patel
khusbu patel

Reputation: 29

<div class="relative m-8 h-64 w-[80%] rounded-lg bg-indigo-500">
  <div class="absolute flex h-full w-full">
    <div class="relative z-30 w-5/6 px-6 py-8 text-white md:w-1/2 md:py-10">
      <h2 class="text-5xl">Tailwind responsive header</h2>
      <span></span>
    </div>

  </div>

  <div class="absolute   bottom-10 -right-20 top-10 block w-5/12">
    <img alt="Snowy mountain lake" class="h-48   w-96 min-w-full object-cover " src="https://images.unsplash.com/photo-1607025952930-da2ac6748e7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" />
  </div>
</div>

https://play.tailwindcss.com/0iYl74EAS4

Upvotes: 0

Емил Цоков
Емил Цоков

Reputation: 692

Try applying the z-index class: z-10 to the element you want on top, Advice use indentation to distinguish which closing tags are matching their corresponding opening tag in html.

Upvotes: 0

Related Questions