JSFiddle - React, Tailwind, and code Playground

by Valilna

HTML

<!DOCTYPE html>

<html>
  <head>
     <meta charset='UTF-8'>
	 <title>Галерея Витягловських</title>
	 <link rel='stylesheet' type='text/css' href='home.css'>
	 <link href='https://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet'> 
  </head>
  <body>
	  
      <div class='gallery'>
	     	 
         <div class='sector one'>
		     <div class='sector_top one'>
			 </div>
			 <div class='dropdown'>
			 <p class='dropbtn'>біографія</p>
			 <div class='dropdown_content'>
			    <a class='biografi_t' href='#'>тетяна</a>
				<a class='biografi_m' href='#'>михайло</a>
			 </div>
			 </div>
			 <div class='sector_bottom one'>
			 </div>
		 </div>
		 
		 <div class='sector two'>
		     <div class='sector_top two'>
			 </div>
			 <p class='works'>роботи</p>
			 <div class='sector_bottom two'>
			 </div>
		 </div>
		 
		 <div class='sector three'>
		     <div class='sector_top three'>
			 </div>
			 <p class='achievments'>досягнення</p>
			 <div class='sector_bottom three'>
			 </div>
		 </div>
		 
		 <div class='sector four'>
		     <div class='sector_top four'>
			 </div>
			 <p class='contact'>контакти</p>
			 <div class='sector_bottom four'>
			 </div>
		 </div>
		 
		 <div class='sector five'>
		     <div class='sector_top five'>
			 </div>
			 <ul id='lang'>
		              <li><a href='index-eng.html'><img src='images/home/eng.png'></a></li>
		              <li><a href='index-pl.html'><img src='images/home/pol.png'></a></li>
		              <li><a href='index.html'><img src='images/home/ukr.png'></a></li>
			 </ul>
			 <div class='sector_bottom five'>
			 </div>
		 </div>

		 <div class='vytiahlovski'>
		     <img src='images/home/vytiahlovski.png'>
	     </div>
		 
		 <div class='names'>
		     <img src='images/home/tetiana_mykhailo.png'>
	     </div>
		 
		 
	 </div>
	
	<div class='slide_show'>
        <canvas></canvas>
	</div>
	<script type='text/javascript' src='home.js'></script>
  </body>
</html>

CSS

* {
	box-sizing: border-box;
	margin: 0;
}

body {
	font-size: 16px;
	overflow: hidden;
}
/*---------------------------GALLERY----------------------------------*/
.gallery {
	position: absolute;
	height: 94%;
	width: 94%;
	left: 3%;
	top: 2%;
	display: flex;
	box-shadow: 0em 2em 3em black,
	            0.05em 0.05em 0em black,
				0.1em 0.1em 0em black,
				0.15em 0.15em 0em black,
				0.2em 0.2em 0em black;
}
canvas {
	position: absolute;
	left: 3%;
	top: 2%;
	background-image: 'images/home/slide_1.jpg';
}

.sector {
	flex: 1;
	display: flex;
	flex-flow: column;
	width: 100%;
	height: 100%;
	border-right: 1px solid #fefef7;
	overflow: hidden;
	z-index: 4;
}

.sector:last-child {
	border: none;
}

.sector_top {
	flex: 75;
}

.sector:hover {
    box-shadow: inset -5em 1em 5em rgba(254, 254, 247, 0.5);
	/*background-color: linear-gradient(to left, rgba(255,255,255,0,7), rgba(255,255,255,0));*/
}

.sector p, .sector ul {
	flex: 4;
	background-color: #fefef7;
}

.sector_bottom {
	flex: 21;
}


/*---------------------------NAVBAR----------------------------------*/
p {
	color: black;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Cuprum', sans-serif;
	font-size: 1.5em;
}

ul {
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
}

#lang li {
	display: inline;
}

#lang a {
	display: inline-block;
	padding-right: 1.5%;
	padding-top: 2%;
}

.dropbtn {
	cursor: pointer;
	overflow: visible;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown_content {
	display: none;
	position: absolute;
	top: -200%;
	left: 0%;
	min-width: 100%;
	z-index: 6;
	box-shadow: 0px -8px 16px 0px rgba(0,0,0,0.2);
	background-color: #fefef7;
}

.dropdown_content a {
	text-decoration: none;
	color: black;
	display: block;
	text-transform: uppercase;
	font-family: 'Cuprum', sans-serif;
	font-size: 1.5em;	
}

.dropdown-content a:hover, .dropdown:hover .dropbtn {
	background-color: #8d7e96;
	color: #f8f2fc;
}

.dropdown:hover .dropdown_content {
   ...

JavaScript

var body = document.querySelector('body');
var gallery = document.querySelector('.gallery');
var rect = gallery.getBoundingClientRect();
var canvas = document.querySelector('canvas');
var galleryWidth = canvas.width = rect.width;
var galleryHeight = canvas.height = rect.height;
var ctx = canvas.getContext('2d');
var j = 0;
var slideSource = ['images/home/slide_1.jpg','images/home/slide_2.jpg','images/home/slide_3.jpg','images/home/slide_4.jpg','images/home/slide_5.jpg','images/home/slide_6.jpg','images/home/slide_7.jpg'];
var slideObjectsArray = [];
var section = greatestCommonDivisor(galleryWidth, galleryHeight); //I'm checking the length of the bigest possible section
                                                                	//on which the legth and the height can be divided.
var sectionCountW = galleryWidth / section; //how many sections are there in the gallery width
var sectionCountH = galleryHeight / section; // same for gallery heigth


function greatestCommonDivisor(x, y) {
  if ((typeof x !== 'number') || (typeof y !== 'number'))
    return false;
  x = Math.abs(x);
  y = Math.abs(y);
  while(y) {
    var t = y;
    y = x % y;
    x = t;
  }
  return x;
}

for (i = 0; i < 7; i++) {
	slideObjectsArray[i] = new Image();
	slideObjectsArray[i].src = slideSource[i];
}

var slideW = slideObjectsArray[j].width;  //I'm checking the real image width, because not all my images will be the same width
var slideH = (slideW / sectionCountW) * sectionCountH; // divide - what is the length of the bigest possible section in image multiply - image height that can be shown on the screen is image section multiplied by the total count of gallery sections in gallery height
var slideSectorW = slideW / 5;
var gallerySectorW = galleryWidth / 5;
var speedGallery = (gallerySectorW/100) * 5;
var speedSlide = (slideSectorW/100)*5;


function drawSlide () {
	for (n = 0; n < 5; n++) {
    if (speedGallery <= gallerySectorW) {
    	ctx.drawImage(slideObjectsArray[j],...