JSFiddle - React, Tailwind, and code Playground

by Tenebrius

HTML

<div id='wrap'>
<div id='cont'>
  <span id='text'>Я немного замутнён</span>
</div>
</div>

CSS

#wrap{
  width: 100%;
  min-height: 600px;
  padding: 1px;
  margin: 1px;
  
  /* фон - незамутнённая картинка */
  background-attachment: fixed;
  background-position-x:50%;
  background-position-y:50%;
  background-image: url(https://yastatic.net/www-skins/_/UBOZSYh5Ea-ZGg4kQasMSqVnUpA.webp);
}
#cont{
  width: 400px;
  height: 200px;
  
  /* фон - размытая картинка */
  background-image: url(https://yastatic.net/www-skins/_/nwpWSk0EIqn8I8S94kvBz1_GoMs.webp);
  background-attachment: fixed;
  background-position-x:50%;
  background-position-y:50%;
  margin: 50px auto;
  
  /* выравнивание текста по центру */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* для красоты */
  border-right: 3px solid #00bcd4;
  border-radius: 3px;
}