JSFiddle - React, Tailwind, and code Playground

by Kanatantsin

HTML

<section class="product-item">
  <div class="product-gallery">
    <img src="https://netology-code.github.io/hj-homeworks/browser/slider/i/spinner.gif" alt="" id="slider">
  </div>
  <div class="product-data">
    <p class="product-firm">Nike</p>
    <h2 class="product-name">AIR MAX TAVAS SD</h2>
    <p class="product-price">160.00</p>
    <p class="product-colors">Black/Pink Pow/Tour Yellow/White</p>
    <p class="product-size">38-42</p>
    <button class="buy-btn">add to cart</button>

    <div class="product-info">
      <p class="product-description">
        The Nike Air Max Tavas SD Men's Shoe recalls the profile of the iconic running original with a Max Air unit in the heel and multi-surface Waffle outsole. A lightweight upper and gradient detail offer a comfortable fit and dynamic look.
      </p>
      <p class="product-description">
        Nike's revolutionary Air-Sole unit made its way into Nike footwear in the late '70s. In 1987, the Nike Air Max 1 debuted with visible air in its heel, allowing fans more than just the feel of Air-Sole comfort
      </p>
    </div>
  </div>
</section>

CSS

@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');

body {
  width: 1280px;
  margin: 0 auto;
  font-family: 'Anton', sans-serif;
  color: #333333;
  background-color: #ece9e9;
  padding: 150px 0;
}

p {
  margin: 10px 0;
}

.product-item {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  padding: 50px;
  min-height: 750px;
  box-shadow: 1px 1px 10px 5px #dddddd;
  background-color: #ffffff;
}

.product-gallery {
  width: 60%;
  border: 1px solid #dddddd;
  position: relative;
  overflow: hidden;
}

.product-gallery img {
  display: block;
  min-height: 100%;
  height: 100%;
  min-width: 100%;
}

.product-data {
  display: flex;
  flex-direction: column;
  width: 30%;
}

.product-firm {
  text-transform: uppercase;
  font-size: 25px;
}

.product-name {
  font-size: 35px;
  line-height: 24px;
  margin: 15px 0;
}

.product-price {
  font-size: 18px;
  color: #666666;
  margin: 10px 0;
}

.product-price::before {
  content: "$ ";
}

.product-colors {
  font-size: 14px;
  color: #0089cf;
  text-transform: uppercase;
}

.product-colors::before {
  content: "Colors: ";
  color: #666666;
}

.product-size {
  text-transform: uppercase;
  font-size: 14px;
}

.product-size::before {
  content: "Sizes: ";
}

.buy-btn {
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  color: #ffffff;
  text-transform: uppercase;
  padding: 15px 55px;
  background-color: #333333;
  border: none;
  transition: 0.4s;
  margin: 15px 0;
}

.buy-btn:hover,
.buy-btn:focus,
.buy-btn:active {
  box-shadow: 1px 1px 15px 1px #999;
  transition: 0.4s;
  outline: none;
  cursor: pointer;
}

.product-info {
  margin: 50px 0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  color: #666666;
}

JavaScript

'use strict';

  var photosForSlider = ["https://netology-code.github.io/hj-homeworks/browser/slider/i/airmax-jump.png",
  "https://netology-code.github.io/hj-homeworks/browser/slider/i/airmax-on-foot.png",
  "https://netology-code.github.io/hj-homeworks/browser/slider/i/airmax-playground.png",
  "https://netology-code.github.io/hj-homeworks/browser/slider/i/airmax-top-view.png",
  "https://netology-code.github.io/hj-homeworks/browser/slider/i/airmax.png"];

  var slider = document.getElementById("slider");

  function slider() {
    if (photosForSlider.currId === undefined){
      photosForSlider.currId = 0;
    }
    if (photosForSlider[photosForSlider.currId] !== undefined){
      slider.src = photosForSlider[photosForSlider.currId];
      if (photosForSlider.currId < photosForSlider.length - 1){
        photosForSlider.currId++;
      } else {
        photosForSlider.currId = 0;
      }
    }
  }

  slider();

  setInterval(slider, 5000);