JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Detail Page</title>
    <script>
      var _tiptop_config = {
        public_api_key: "YOUR_PUBLIC_API_KEY",
        script: "https://cdn.tiptop.com/js/v1/tiptop.js",
      };

      !(function(t, e) {
        var n = t.tiptop || {},
          c = document.createElement("script");
        c.async = true;
        c.src = e.script;
        var i = document.getElementsByTagName("script")[0];
        i.parentNode.insertBefore(c, i);
        t.tiptop = n;
      })(window, _tiptop_config);

    </script>
  </head>

  <body>
    <main>
      <div class="product-detail">
        <h1>Product Name</h1>
        <div class="product-description">
          Product description.
        </div>
        <p>$100</p>
        <div class="tiptop-promo-widget" data-page-type="product" data-amount="1000"></div>
        <div class="checkout-buttons">
          <button class="cart-button">+ Add to cart</button>
          <button class="buy-now-button">Buy it now</button>
        </div>

      </div>
    </main>
  </body>

</html>

CSS

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
 }

 body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
   background: white;
   color: #333;
 }

 main {
   max-width: 600px;
   background: white;
   padding: 20px;
 }

 .product-detail {
   display: flex;
   flex-direction: column;
   gap: 5px;
   max-width: 400px;
 }

 .product-detail h1 {
   font-size: 24px;
   font-weight: 700;
 }

 .tiptop-promo-widget {
   margin-top: 10px;
   max-width: 350px;
 }

 .checkout-buttons {
   margin-top: 30px;
   display: flex;
   flex-direction: column;
   gap: 5px;
 }

 .cart-button {
   background-color: white;
   color: black;
   border: 1px solid black;
   padding: 15px 20px;
   text-align: center;
   display: inline-block;
   margin-right: 10px;
   cursor: pointer;
   border-radius: 8px;
   outline: none;
   max-width: 350px;
 }

 .buy-now-button {
   background-color: #8638e5;
   color: white;
   padding: 15px 20px;
   text-align: center;
   display: inline-block;
   margin-right: 10px;
   cursor: pointer;
   border-radius: 8px;
   outline: none;
   border: none;
   max-width: 350px;
 }

 .product-description {
   color: #808080;
   font-size: 14px;
 }