JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="con-graf">
 <div class="con-iframe">
  
<iframe title="Der Kampf um Arbeit" aria-label="Deutschland landkreise (2017) Choropleth Karte" id="graf_1" src="//datawrapper.dwcdn.net/nXSI3/1/" scrolling="no" frameborder="0" style="width: calc(100% - 20px); max-width: 600px !important; height: 600px; max-height: calc(80vh);"></iframe>

</div>
</div>

<script type="text/javascript">!function(){"use strict";window.addEventListener("message",function(a){if(void 0!==a.data["datawrapper-height"])for(var e in a.data["datawrapper-height"]){var t=document.getElementById("datawrapper-chart-"+e)||document.querySelector("iframe[src*='"+e+"']");t&&(t.style.height=a.data["datawrapper-height"][e]+"px")}})}();</script>

CSS

html, body {
  box-sizing: border-box;
  font-family: 'Open Sans';
  margin: 0;
}

body {
  padding: 10px;
}

.con-graf {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  height: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.con-iframe {
  position: block;
  width: calc(100% - 20px);
}

.con-iframe iframe {
  margin: 20px auto;
  position: absolute;
  position: block;
}