JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
	<link rel="stylesheet" type="text/css" href="style.css">
    <title>HaxWay</title>
	<div class="container">
		<div class="header-text">
			<img src="image/logo.png" height="50" width="50" class="logo">
			<h2>Каталог Приложений.</h2>
			<h3>Нажмите на значок <img src=image/download.PNG height="15" width="15">, чтобы скачать приложение.</h3>
		</div>
      <div class="box-1"><img src="image/vk.PNG 
"height="75px" width="75" class="center-img"><h1>VKAgain</h1><h4>Тыц</h4></div>
			<div class="box-2"><img src="image/yt.PNG 
"height="75px" width="75" class="center-img"><h1>Youtube++</h1></div></div>
			<div class="box-3"><img src="image/rfi.PNG 
"height="75px" width="75" class="center-img"><h1>Rocket For Instagram</h1></div></div>
			<div class="box-4"><img src="image/plus.PNG 
"height="75px" width="75" class="center-img"><h1>Plus For Instagram</h1></div></div>
			<div class="box-5"><img src="image/watusi.PNG 
"height="75px" width="75" class="center-img"><h1>Watusi For Whatsapp</h1></div></div>
			<div class="box-6"><img src="image/spotify.PNG 
"height="75px" width="75" class="center-img"><h1>Spotify++</h1></div></div>
			<div class="box-7"><img src="image/ym.PNG 
"height="75px" width="75" class="center-img"><h1>Яндекс.Музыка</h1></div></div>

CSS

body{
	margin:0;
	padding:0;
    background:#fff;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1 {
    color : black;
    text-align: left;
    font-size: medium;
    flex-direction: column
}
h2 {
  color : blaxk;
  text-align: center;
  font-size: xx-large;
}
h3 {
  color: grey;
  text-align: center;
  font-size: medium;
}
h4 {
  color: grey;
  text-align: left;
  font-size: x-small;
  flex-direction: column
}
  .box-1{
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
 background: white;
 border-radius: 20px;
 width: 330px;
 height: 100px;
 display: flex;
 box-shadow: 0px 26px 125px 1px rgba(0, 0, 0, .04);
}
  .box-2{
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
background: white;
border-radius: 20px;
 width: 330px;
 height: 100px;
 display: flex;
 box-shadow: 0px 26px 125px 1px rgba(0, 0, 0, .04);
}
  .box-3{
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
background: white;
border-radius: 20px;
 width: 330px;
 height: 100px;
 display: flex;
 box-shadow: 0px 26px 125px 1px rgba(0, 0, 0, .04);
}
.box-4{
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
background: white;
border-radius: 20px;
 width: 330px;
 height: 100px;
 display: flex;
box-shadow: 0px 26px 125px 1px rgba(0, 0, 0, .04);
}
.box-5{
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
background: white;
border-radius: 20px;
 width: 330px;
 height: 100px;
 display: flex;
 box-shadow: 0px 26px 125px 1px rgba(0, 0, 0, .04);
}
.box-6{
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
background: white;
border-radius: 20px;
 width: 330px;
 height: 100px;
 display: flex;
 box-shadow: 0px 26px 125px 1px rgba(0, 0, 0, .04);
}
.box-7{
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 20px;
background: white;
border-radius: 20px;
 width: 330px;
 height: 100px;
 display: flex;
 box-shadow: 0px 26px 125px 1px rgba(0, 0, 0, .04);
}
.center-img {
  display:...