JSFiddle - React, Tailwind, and code Playground

by arye_eidelman

HTML

<div class="layered">
  <img src="https://via.placeholder.com/250x100?text=first" />
  <p>
    2
  </p>
  <div>
    <p>
      Third layor
    </p>
    <p>
      Third layor continued
    </p>
    <p>
      Third layor continued
    </p>
    <p>
      Third layor continued
    </p>
  </div>
</div>

CSS

.layered {
  display: grid;

  /* Set horizontal alignment of items in, case they have a diffrent width. */
  /* justify-items: start | end | center | stretch (default);*/
  justify-items: center;

  /* Set vertical alignment of items, in case they have a diffrent height. */
  /* align-items: start | end | center | stretch (default); */
  align-items: center;
}

.layered > * {
  grid-column-start: 1;
  grid-row-start: 1;
}


/* for demonstration purposses only */
.layered > * {
  outline: 1px solid red;
  background-color: rgba(255, 255, 255, 0.4)
}