JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <header>
  <a href="#">
  <h1>TestName</h1></a>
  </header>
  <div class="product">
    <img src="https://static-pss-ru.wgcdn.co/shop/media/items/12/4f/124ff63b6d5748e39ab3c7e64adfe74d.png" alt="EBR 75 FL 10 Купить">
  </div>
  <h2>EBR 75 FL 10</h2>
  <span class="price">10 ₽</span>
   <div class="bth">
    <a href="#"><button type="button">Купить</button></a>
    </div>
    <h3>СОДЕРЖИМОЕ</h3>
    <hr class="hr_package">
    <div class="package_flag"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMSBCYXNpYy8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS1iYXNpYy5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImJhc2ljIiBpZD0iTGF5ZXJfMSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxIDE0IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxkZWZzPgoJCQk8cmVjdCBpZD0iU1ZHSURfMV8iIHg9IjAiIHk9IjAiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxMy45OTkiLz4KCQk8L2RlZnM+CgkJPHVzZSB4bGluazpocmVmPSIjU1ZHSURfMV8iICBvdmVyZmxvdz0idmlzaWJsZSIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPgoJCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+CgkJPC9jbGlwUGF0aD4KCTwvZz4KPC9nPgo8cmVjdCB4PSIwIiB5PSIwIiBmaWxsPSIjMDAyQjcwIiB3aWR0aD0iNyIgaGVpZ2h0PSIxNCIvPgo8cmVjdCB4PSIxNCIgeT0iMCIgZmlsbD0iI0JEMDAwMCIgd2lkdGg9IjciIGhlaWdodD0iMTQiLz4KPC9zdmc+Cg==" title="Франция" alt="Флаг Франции"></div>
    <img...

CSS

*{
	margin: 0;
	padding: 0;
}
html, body{
	width: 100%;
	height: 100%;
}
body{
  	font-family: "WarheliosBold_Web","Arial Narrow",Tahoma,arial,sans-serif;
    background-color: #1C1B15;
		color: #fff;
}
a{
	text-decoration: none;
	color: #fff;
	cursor: pointer;
}
header{
	background: #232323;
}
h1{
	margin-left: 100px;
	color: #999;
}
header a{
	text-decoration: none;
	display: inline-block;
}
.logoimg{
width: 50px;
height: 50px;
position: absolute;
user-select: none;
margin-left: 50px;
}
.product {
  text-align: right;
  background: url(https://static-pss-ru.wgcdn.co/shop/media/backgrounds/WoT_vehicles_KphTRpf.jpg) no-repeat center / cover;
  height: 600px;
}
img {
  max-width: 100%;
}
h2{
  font-family: "WarheliosBold_Web","Arial Narrow",Tahoma,arial,sans-serif;
  margin-top: -438px;
  font-size: 62px;
  margin-left: 50px;
}
.price{
      color: #d1b482;
      font: 24px "WarheliosRegular_Web","Arial Narrow",Tahoma,arial,sans-serif;
      letter-spacing: 1.2px;
      margin-left: 50px;
}
button{
padding: 0 46px;
white-space: nowrap;
display: inline-block;
    background-color: #f26402;
    border: none;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font: 17px "WarheliosBold_Web","Arial Narrow",Tahoma,arial,sans-serif;
    height: 60px;
    line-height: 60px;
    padding: 0 26px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    transition: color .2s,width .2s,font-size .2s,background-color .2s;
    vertical-align: middle;
    margin-left: 50px;
    margin-top: 18px;
    outline: none;
}
button:hover {
  background-color: #f78c03;
}
button:active {
  animation-name: bounce;
  animation-duration: .2s;
}
@keyframes bounce {
    0% { transform: scale(1); }
    50% { transform: scale(.98); }
    100% { transform: scale(1); }
}
h3{
  font-family: "WarheliosBold_Web","Arial Narrow",Tahoma,arial,sans-serif;
	margin-left: 50px;
	margin-top: 250px;
	font-size: 30px;
  font-weight: normal;
  text-transform:...