JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div class="yandexmap" style="width:560px;height:700px;overflow:hidden;position:relative;">
  <iframe style="width:100%;height:100%;border:1px solid #e6e6e6;border-radius:8px;box-sizing:border-box" src="https://yandex.ru/maps-reviews-widget/47497349497?comments"></iframe>
  <a href="https://yandex.ru/maps/org/food_power/47497349497/" target="_blank" style="box-sizing:border-box;text-decoration:none;color:#b3b3b3;font-size:10px;font-family:YS Text,sans-serif;padding:0 20px;position:absolute;bottom:8px;width:100%;text-align:center;left:0;overflow:hidden;text-overflow:ellipsis;display:block;max-height:14px;white-space:nowrap;padding:0 16px;box-sizing:border-box">Food Power на карте Иванова — Яндекс Карты</a>
</div>

<style>
  @media (max-width: 768px) {
    div.yandexmap {
      max-width: 100%;
      padding-bottom: 140%;
      /* Измените значение для достижения нужного соотношения сторон на меньших экранах */
    }

    a.yandexmap {
      font-size: 8px;
    }
  }

</style>