JSFiddle - React, Tailwind, and code Playground

by Van Hai Le

HTML

<div class="hero-img">
  <img src="https://images.unsplash.com/photo-1550510847-7fb9d8d84d34?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1000&h=500&fit=crop&ixid=eyJhcHBfaWQiOjF9" alt="">
</div>

CSS

.hero-img {
  width: 80%;
  height: 300px;
}

.hero-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}