JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<main id="memoir">
    <div class="box-outer-kgm">
        <div class="container-kgm">
            <!-- Section Intro -->
            <section class="section-intro">
                <div class="box-inner text-center">
                    <div class="box-image mb-2">
                        <img src="/kilas-balik/img/KGM-new/logo-kilas-balik.png" class="img-fluid" />
                    </div>
                    <div class="box-text">
                        <p>Halo Bunda Erika,<br/> Lihat Kilas Balik Bunda di Jurnal Klub Generasi Maju*, Yuk!​</p>
                    </div>
                    <div class="box-note">
                        <p>*) berdasarkan transaksi terakhir November 2021.</p>
                    </div>
                </div>
                <div class="arrow-holder text-center">
                    <img src="/kilas-balik/img/KGM-new/Landing-Page/chevron-down.png" class="img-fluid" />
                </div>
            </section>

            <!-- Section Join Date -->
            <section class="section-join-date">
                <div class="box-text-highlight text-center">
                    <p>Bunda… ingat gak?<br/> Sejak <span>23 Juni 2021</span> , Bunda telah bergabung di Klub Generasi Maju untuk dukung si Kecil maksimalkan potensi prestasinya!</p>
                </div>
            </section>

            <!-- Section Total Point -->
            <section class="section-total-point">
                <div class="background-oval"></div>
                <div class="box-content">
                    <div class="box-text">
                        <p>Sebagai Bunda Generasi Maju, sepanjang 2021 Bunda telah menabung sebanyak:</p>
                        <h3>30.000 Poin</h3>
                    </div>
                    <div class="box-image">
                        <img src="/kilas-balik/img/KGM-new/Landing-Page/Total-Point/vector-point.png" class="img-fluid" />
                    </div>
                </div>
            </section>

         ...

CSS

h1,h2,h3,h4{color:#5f9ea0;font-family:VAG-Rounded-BT}button{font-family:VAG-Rounded-BT!important}div,input,p{font-family:VAG-Rounded-Light!important}.wrap-kgm{width:1080px;margin:auto;position:relative}@media (max-width:767px){.wrap-kgm{width:auto;margin:0 12px}}.wrap-kgm-medium{width:860px;margin:0 auto;display:block}@media (max-width:767px){.wrap-kgm-medium{width:auto;margin:0 12px}}.btn{text-transform:uppercase;cursor:pointer;font-family:VAG-Rounded-BT,serif!important}.btn-primary{background:linear-gradient(to bottom,#cb0024,#b70000)!important;color:#fff!important;font-size:16px!important;transition:.5s;box-shadow:0 3px 6px #bbb}.btn-primary:hover{border-color:transparent;box-shadow:1px 0 8px 1px #cb0024;color:#fafafa}.btn-secondary{padding:12px;background:linear-gradient(to right,#fff7f7,#ffcbcb)!important;color:#d90101!important;margin-top:7px!important;width:auto;font-size:16px!important;box-shadow:0 3px 6px #bbb;border-radius:25px!important;transition:.5s}.btn-secondary:hover{opacity:.9;border-color:transparent;box-shadow:1px 0 8px 1px #cb0024}.btn-disabled{background:linear-gradient(to bottom,#8d8d8d,#c9c9c9)!important;color:#fff!important;font-size:16px!important;box-shadow:0 3px 6px #bbb}.btn-whatsapp{background:#25d366!important;box-shadow:0 3px 6px #bbb;transition:.5s}.btn-whatsapp i{color:#fff}.btn-whatsapp:hover{background:#075e54!important}input[type=number]{width:100%}.breadcumb{display:block}.breadcumb ul{list-style:none;padding:0;margin:0}.breadcumb ul li{display:inline-block;font-family:VAG-Rounded-Light,serif}.breadcumb ul li a{font-family:VAG-Rounded-Light,serif}.breadcumb ul li::after{content:'>';margin:0 4px 0 8px;color:#cb0024}.breadcumb ul li:last-child::after{content:''}.full-width{width:100%;margin:16px...

JavaScript

var screenCapture = $(".section-capture").get(0);
    $('.btn-share-stories').click(function(e) {
        $(".btn-share-stories").hide();
        html2canvas(screenCapture, { useCORS: true }).then(function(canvas) {
            // canvas width
            var canvasWidth = canvas.width;
            // canvas height
            var canvasHeight = canvas.height;
            // render image
            var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
            // save as image
            Canvas2Image.saveAsImage(canvas, canvasWidth, canvasHeight, "png", "Ceritaku Bersama Generasi Maju");
            $(".btn-share-stories").show();
        });
    });