JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

CSS

body {
  background: lightgray;
}

.image-container {
  display: flex;
  justify-content: center;
}

.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.image-2 {
  width: 500px;
  height: 500px;
}

.image-2 img {
  align-self: flex-start;
}

.image-3 {
  width: 300px;
}