JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<table class="table">
  <tr>
    <td>
      <div class="qo-upload">
        <div class="qo-upload__title">Кликните или перетащите файл сюда</div>
        <div class="qo-upload__description">Поддерживаемые форматы: <strong>.pdf</strong>, <strong>.ai</strong>, <strong>.psd</strong>, <strong>.jpg</strong>, <strong>.gif</strong>, <strong>.png</strong>, <strong>.eps</strong>, <strong>.tiff</strong>, <strong>.heic</strong></div>
        <input
          class="qo-upload__input"
          type="file">
        <button
          class="qo-upload-remove"
          type="button">Удалить</button>
        <button
          class="qo-upload-cancel"
          type="button">Отменить загрузку</button>
      </div>
    </td>
    <td>
      <div class="qo-upload qo-upload--loading">
        <div class="qo-upload__title">Кликните или перетащите файл сюда</div>
        <div class="qo-upload__description">Поддерживаемые форматы: <strong>.pdf</strong>, <strong>.ai</strong>, <strong>.psd</strong>, <strong>.jpg</strong>, <strong>.gif</strong>, <strong>.png</strong>, <strong>.eps</strong>, <strong>.tiff</strong>, <strong>.heic</strong></div>
        <input
          class="qo-upload__input"
          type="file">
        <button
          class="qo-upload-remove"
          type="button">Удалить</button>
        <button
          class="qo-upload-cancel"
          type="button">Отменить загрузку</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="qo-upload qo-upload--has-preview">
        <div class="qo-item-preview">
          <img
            class="qo-item-preview__thumb"
            src="https://picsum.photos/seed/picsum/256"
            alt="">
        </div>
        <input
          class="qo-upload__input"
          type="file">
        <button
          class="qo-upload-remove"
          type="button">Удалить</button>
        <button
          class="qo-upload-cancel"
          type="button">Отменить загрузку</button>
      </div>
    </td>
    <td>
      <div...

CSS

html {
  font-family: sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.table {
  width: 100%;
  max-width: 600px;
}
.table td {
  padding: 10px;
}

.qo-upload {
  width: 256px;
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
  padding: 10px;
}
.qo-upload__input {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.qo-upload__title {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 700;
}
.qo-upload__description {
  font-size: 14px;
}

.qo-upload--loading:before {
  content: '';
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .7);
}
.qo-upload--loading:after {
  content: '';
  position: absolute;
  z-index: 35;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .7);
}

.qo-upload--loading .qo-upload__input {
  pointer-events: none;
}

.qo-upload--has-preview {
  padding: 5px;
}

.qo-upload-remove {
  display: none;
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 20px;
  
  transform: translateX(-50%);
  
  cursor: pointer;
}

.qo-upload-cancel {
  display: none;
  position: absolute;
  z-index: 40;
  top: 50%;
  left: 50%;
  
  transform: translate3d(-50%, -50%, 0);
  
  box-shadow: 0  0 18px rgba(0,0,0,.5);
  
  cursor: pointer;
}

.qo-upload--has-preview .qo-upload-remove,
.qo-upload--loading .qo-upload-cancel {
   display: inline-block;
}

.qo-upload--loading .qo-upload-remove {
  display: none;
}

.qo-item-preview {
  width: 100%;
  min-height: 100px;
  font-size: 0;
}
.qo-item-preview__thumb {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  
  vertical-align: middle;
}


@-webkit-keyframes spin-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}