JSFiddle - React, Tailwind, and code Playground

by dima_makh

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Sliders</title>
  </head>

  <body>
    <section class="row client">
      <ul class="client__list">
        <li class="client__item client-sec">
        </li>
        <li class="client__item client-sec">
        </li>
        <li class="client__item client-sec">
        </li>
        <li class="client__item client-sec">
        </li>
        <li class="client__item client-sec">
        </li>
        <li class="client__item client-sec">
        </li>
        <li class="client__item client-sec">
        </li>
      </ul>
      <span class="client__toggle"></span>
    </section>

  </body>

</html>

CSS

body {
  margin: 0;
  background-color: gray;
}

.client {
  width: 1500px;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
}

.client__title {
  margin: 0 auto;
  margin-bottom: 50px;
}

.client__list {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: flex-start;
  align-items: flex-start;
  justify-content: space-between;
  padding-left: 0;
  min-height: 550px;
  background-color: white;
  list-style: none;
}

.client__item {
  background-color: black;
}

JavaScript

$('li').each(function(index, el) {
    // Size
    let randSize = getRandom(100, 190);

    $(this).width(randSize);
    $(this).height(randSize);


    // Position
    let randMargin = getRandom(0, $('.client__list').height());
    let difHeight = $('.client__list').height() - randMargin;

    if ((difHeight - $(this).height()) <= 0) $(this).css('margin-top', $('.client__list').height() - $(this).height() + 'px');
    else $(this).css('margin-top', randMargin + 'px');
  });

  $('li').on('click', function(event) {
    event.target.style.width = 480 + 'px';
    event.target.style.height = 480 + 'px';
    event.target.parentElement.style.marginTop = 10 + 'px';
  });

  function getRandom(min, max) {
    let rand = min + Math.random() * (max + 1 - min);
    return Math.floor(rand);
  }