JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<div class="desktop report">
<iframe width="600" height="338" src="https://datastudio.google.com/embed/reporting/25197aa3-7bb8-4f7b-a8bd-298e4b973fe3/page/6AiZB" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

<div class="mobile report">
<iframe width="500" height="500" src="https://datastudio.google.com/embed/reporting/91d37636-31f7-4f03-a8b6-1b0d93562931/page/6AiZB" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

CSS

.mobile {display: none;}
@media only screen and (max-width: 768px) {
	.mobile {display: block;}
.desktop {display: none;}
}
  #chatbot-wrapper {
    width: 90% !important;
  }
  #chat-messenger.active {}
  div#chat-messenger .chat-header {
    height: 20%;
  }
  div#chat-messenger .chat-window {
    height: 70%;
    top: 20%;
  }
  div#chat-messenger {
    min-width: 0px;
    width: 100%;
    left: 5%;
    border-radius: 0px;
    border: 0;
    position: fixed;
    top: 0px !important;
    left: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    height: auto !important;
  }
  div#chat-messenger .author-message {
    width: 85%;
  }
}