JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div class="outer">
  <div class="main">
    <div class="image">
      <img src="https://via.placeholder.com/300x100" />
    </div>
  </div>
</div>

CSS

body {
  text-align: center;
}

.outer {
  position: relative;
}

.main {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 15px;
  background: green;
  height: 400px;
}

.image {
  position: absolute;
  background: red;
  left: auto;
  right: 0;
  width: 100%;
}

img {
  width: 100%;
  height: auto;
}