JSFiddle - React, Tailwind, and code Playground

by delux

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример веб-страницы</title>
  <link rel="stylesheet" type="text/css" href="/js/Original/reset.css" >
  <link rel="stylesheet" type="text/css" href="/js/Original/style.css" >
  <script src="/js/Original/first.js"></script>
 </head>
 <body>
  <!-- Комментарий -->
  
  
  <div id="fonDiv_1"></div>

  <div id="parent">
    <div id="fonDiv_2"></div>
    <div id="fonDiv_3"></div>
  </div>

 </body>
</html>

CSS

body {
    background-image: url(/js/Original/picture/div3.jpg);
    background-size: cover;
}
html, body {
    height: 100%;
}

#parent {
    height: 100%;
    display: grid;
    grid-template-columns: auto  1fr;
    justify-content: center;
}

#fonDiv_1 {
    /*background-color: blue;*/
    width: 100%;
    min-width: 500px;
    min-height: 150px;

    -webkit-box-shadow: 0px 19px 16px -5px rgba(0, 0, 0, 0.45);
    -moz-box-shadow: 0px 19px 16px -5px rgba(0, 0, 0, 0.45);
    box-shadow: 0px 19px 16px -5px rgba(0, 0, 0, 0.45);
}
#fonDiv_2 {
    background-image: url(/js/Original/picture/div2.png);
    background-size: 300px 100%;
    height: 100%;
    min-width: 300px;
    z-index: -1;

    -webkit-box-shadow: 19px 0px 16px -5px rgba(11, 11, 11, 1), -19px 0px 16px -5px rgba(11, 11, 11, 1);
    -moz-box-shadow: 19px 0px 16px -5px rgba(11, 11, 11, 1), -19px 0px 16px -5px rgba(11, 11, 11, 1);
    box-shadow: 19px 0px 16px -5px rgba(11, 11, 11, 1), -19px 0px 16px -5px rgba(11, 11, 11, 1);
}
#fonDiv_3 {
    height: 100%;
    /* min-width: 1000px; */
    width: 100%;
    min-height: 300px;
    z-index: -1;
}