JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <h3 class="block__title">Контакты</h3>
  <div class="block__inner">
  <div class="block__map">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11376654.143867694!2d-6.932249111537538!3d45.881243114560725!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd54a02933785731%3A0x6bfd3f96c747d9f7!2z0KTRgNCw0L3RhtC40Y8!5e0!3m2!1sru!2sua!4v1600279982230!5m2!1sru!2sua" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
  </div>
  </div>
</div>

CSS

.block__title {
  padding-bottom: 0px;
}

.block__inner {
  position: relative;
  z-index: 2;
  height: 800px;
  background: rgb(250,250,255);
background: linear-gradient(180deg, rgba(250,250,255,1) 0%, rgba(255,255,255,0) 47%, rgba(255,255,255,1) 100%);
}

.block__map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

}

iframe {
  min-height: 800px;
  display: block;
  width: 100%;
  height: calc(100% + 210px);
  margin: -105px 0;
}