JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<div class="main">  
  <div class="preview">
    <div class="preview-image">

      <img src="https://pbs.twimg.com/media/EeCOiprXYAAdTlj.jpg" alt="snow-river">
    </div>
    <div class="preview-image">

      <img src="https://tour-bar.ru/wp-content/uploads/2019/09/cropped-kariby-osnovnaya.jpg" alt="snow-river">
    </div>
    <div class="preview-image">

      <img src="https://tour-bar.ru/wp-content/uploads/2019/09/cropped-kariby-osnovnaya.jpg" alt="snow-river">
    </div>
    <div class="preview-image">

      <img src="https://www.nastol.com.ua/pic/201604/1920x1080/nastol.com.ua-172666.jpg" alt="snow-river">
    </div>
    <div class="preview-image">

      <img src="https://zakagioboi.ru/assets/images/products/country/07.03.14/CHINA-107003903.jpg" alt="snow-river">
    </div>     
     <div class="preview-image"></div>
  </div>
</div>

CSS

.main {
    max-width: 560px;
    margin: 0 auto;
    min-height: 100vh;
}
.preview {
    display: flex;
    flex-wrap: wrap;
}
.preview-image {
    position: relative;
    height: 20vh;
    flex-grow: 1;
    margin: 5px;
    overflow: hidden;
}
.preview-image:last-child {
    flex-grow: 10;
}
.preview-image img {
    max-height: 100%;
    min-width: 100%;
    object-fit: cover;
    vertical-align: bottom;
}
.drop-zone {
    border: 2px dotted rgb(67, 114, 243);
  padding: 5px;
}

JavaScript

const preview = document.querySelector('.preview');

preview.addEventListener("dragover", (event) => {
    event.preventDefault();
    preview.classList.add("drop-zone");
});

preview.addEventListener("dragleave", () => {
    preview.classList.remove("drop-zone");
});
preview.addEventListener("drop", () => {
    preview.classList.remove("drop-zone");
});