JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TurboSamp - каталог читов</title>
	<link rel="stylesheet" href="css/catalog.css">
	<script src="js.js"></script>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500&family=Raleway:wght@500&display=swap" rel="stylesheet">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@700&display=swap" rel="stylesheet">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
	<!-- <link rel="stylesheet" type="text/css" href="css/adaption.css"> -->
	<link rel="stylesheet" href="css/adaptive.css">
	<script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
	<script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
	<script...

CSS

* {
	margin: 0;
	padding: 0;
}
body {
	background: #0f0c29;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
a{
  color:  #fff;
  text-decoration: none;
}
.header {
  display: flex;
  width: 100%;
  padding: 10px;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) );
  font-family: Raleway;
}
.header a:hover {
  text-shadow: 0 4px 22px white;
  transition-duration: 1s;
}
.header__section {
  margin-left: 37%;
  margin-top: 15px;
  align-items: center;
  position: absolute;
  color: #fff;
}
.header__button {
  float: left;
  height: 0;
  margin-top: 7px;
  margin-left: 70%;
  position: absolute;

}
.header__item {
  float: left;
  padding: 5px 15px;
  margin-left: 20%;
  font-size: 20px;
  margin-left: 10px;
}
.header__section1 {
  color: #fff;
  margin-right: 55%;
}
.headerlogo {
  font-weight: bolder;
}

.header__section1 img {
    margin-left: 250%;
}
/* Dropdown Button */
.dropbtn {
    background-color: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}
/* Dropdown button on hover & focus */
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 22%;
    margin-top: 5%;
    font-family: Raleway;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    
    min-width: 160px;
    z-index: 2;
    margin-left: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown...

JavaScript

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}