index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
    />
    <title>Mollie Components Examples</title>
    <style>
      body {
        margin: 0;
        padding: 60px 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        font-size: 16px;
        text-align: center;
      }

      h1 {
        font-weight: 500;
        margin: 0;
      }

      a {
        color: #07f;
        text-decoration: none;
      }

      a:hover,
      a:focus {
        text-decoration: underline;
      }

      .wrapper {
        width: 600px;
        margin: 0 auto;
      }

      .link-wrapper {
        margin-top: 20px;
      }
      
      iframe {
        display: block;
        border: 1px solid #ddd;
        width: 100%;
        height: 500px;
        margin-top: 40px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Mollie Components Examples</h1>

      <div class="link-wrapper">
        <a href="https://docs.mollie.com/guides/mollie-components/overview"
          >View documentation</a
        >
        |

        <a href="https://docs.mollie.com/guides/mollie-components/reference"
          >API reference</a
        >
        |
        <a href="https://github.com/mollie/components-examples">GitHub</a>
      </div>

      <iframe src="example-1/"></iframe>

      <div class="link-wrapper">
        <a href="https://github.com/mollie/components-examples/tree/master/example-1"
          >View Example 1 on GitHub</a
        >
      </div>

      <iframe src="example-2/"></iframe>
      <div class="link-wrapper">
        <a href="https://github.com/mollie/components-examples/tree/master/example-2"
          >View Example 2 on GitHub</a
        >
      </div>

      <iframe src="example-3/"></iframe>
      <div class="link-wrapper">
        <a href="https://github.com/mollie/components-examples/tree/master/example-3"
          >View Example 3 on GitHub</a
        >
      </div>

      <iframe src="example-4/"></iframe>
      <div class="link-wrapper">
        <a href="https://github.com/mollie/components-examples/tree/master/example-4"
          >View Example 4 on GitHub</a
        >
      </div>

      <iframe src="example-5/"></iframe>
      <div class="link-wrapper">
        <a href="https://github.com/mollie/components-examples/tree/master/example-5"
          >View Example 5 on GitHub</a
        >
      </div>

      <iframe src="example-6/"></iframe>
      <div class="link-wrapper">
        <a href="https://github.com/mollie/components-examples/tree/master/example-6"
          >View Example 6 on GitHub</a
        >
      </div>
    </div>
  </body>
</html>