JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<form class="filters hidden" action="index.html" method="get" autocomplete="off">
  <input type="radio" id="filter-popular" class="filters-radio" name="filter" value="popular" checked>
  <label for="filter-popular" class="filters-item">Популярные</label>

  <input type="radio" id="filter-new" class="filters-radio" name="filter" value="new">
  <label for="filter-new" class="filters-item">Новые</label>

  <input type="radio" id="filter-discussed" class="filters-radio" name="filter" value="discussed">
  <label for="filter-discussed" class="filters-item">Обсуждаемые</label>
</form>

<div class="upload">
  <form class="upload-form upload-image invisible" id="upload-select-image" method="post" enctype="multipart/form-data">
    <input type="file" id="upload-file" class="upload-input" name="filename" required>
    <label class="upload-file upload-control" for="upload-file"></label>
    <button class="upload-submit upload-control" type="submit"></button>
  </form>

  <div class="upload-overlay">
    <form class="upload-form upload-filter" id="upload-filter" method="post" enctype="multipart/form-data" autocomplete="off">
      <fieldset class="upload-resize-controls">
        <button type="button" class="upload-resize-control upload-resize-controls-button upload-resize-controls-button-dec">–</button><!--
        --><input type="text" class="upload-resize-control upload-resize-controls-value" value="55%" readonly /><!--
        --><button type="button" class="upload-resize-control upload-resize-controls-button upload-resize-controls-button-inc">+</button>
      </fieldset>

      <div class="upload-form-preview">
        <div></div>
        <img src="img/upload-default-image.png" class="filter-image-preview">
      </div>

      <fieldset class="upload-filter-controls">
        <div class="upload-filter-level">
          <div class="upload-filter-level-line">
            <div class="upload-filter-level-pin"></div>
            <div...

JavaScript

'use strict';

var COMMENTS = [
  'Всё отлично!',
  'В целом всё неплохо. Но не всё.',
  'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце-концов это просто непрофессионально.',
  'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
  'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
  'Лица у людей на фотке перекошены, как-будто их избивают. Как можно было поймать такой неудачный момент?!'
];

function randomComment(array) {  // функция выбора случайного комментария из массива
  var rand = Math.floor(Math.random() * array.length);
  return array[rand];
};

function createPicturesArray(length) {  // функция создания массива JS-объектов
  var array = [];
  for (var i = 0; i < length; i++) {
    var randomPicture = {
      url: 'photos/' + (i + 1) + '.jpg',
      likes: 15 + Math.floor(Math.random() * (200 + 1 - 15)),
      comments: [
        randomComment(COMMENTS),
        randomComment(COMMENTS)
      ]
    };
    array.push(randomPicture);
  }
  return array;
};

function createPicture(picture) {  // функция создания DOM-элемента на основе шаблона и JS-объекта
  var pictureElement = pictureTemplate.cloneNode(true);
  pictureElement.querySelector('img').setAttribute('src', picture.url);
  pictureElement.querySelector('.picture-likes').textContent = picture.likes;
  pictureElement.querySelector('.picture-comments').textContent = picture.comments.length;
  return pictureElement;
};

function fillPicturesFragment(picturesArray) {  // функция заполнения блока DOM-элементами на основе массива JS-объектов
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < picturesArray.length; i++) {
    fragment.appendChild(createPicture(picturesArray[i]));
  }
  return fragment;
};


var pictureElementsBlock = document.body.querySelector('.pictures');  // место отрисовки сгенерированных DOM-элементов
var pictureTemplate =...