How to build beautiful iframe

HTML-CSS
1

I want to know how to beautiful iframe to render website.
I know about iframe html tag but I want to know how to add responsive breakpoints to the iframe like in this website.

Just give me some idea how to approach this then I will made it on my own.
Please help me.

2

The iframe is just an iframe, it hasn’t been styled at all bar 100% width and a set height (600px). It doesn’t have responsive breakpoints or anything, it’s just 100% width. The frame around it is just CSS + some JS listeners on the buttons to change the width of that container element by toggling the classes.

3

I want to know how to build that border around the iframe.
Give me some idea so, I can implement that.

4

for example:

<div>
  <header>
    <!-- header stuff -->
  </header>
  <iframe />
<div>

div {
  background-color: mediumspringgreen;
  border-radius: 0.5rem;
  overflow: hidden;
}

header {
  padding: 0.5rem;
  display: flex;
}
5

Thanks for our help!!