JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="wrapper">

  <div class="img">
    **IMG HERE**
  </div>
  
</div>

CSS

body {
  width: 100%;
  height: 100%;
}

.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
}

.img {
  padding-top: 75%;
  width: 100%;
  background: #ccc;
  text-align: center;
  background-image: url(https://i.imgur.com/WY7TcGx.jpg);
  background-size: cover;
}