JSFiddle - React, Tailwind, and code Playground

by korean man

HTML

<script src="https://overseadesign.cafe24.com/js/jquery-1.11.3.min.js"></script>
<script src="https://overseadesign.cafe24.com/js/html2canvas.js"></script>
<div id="contaner">
  <div class="badges">
    <p>
      <span class="firstLine">GET UP TO</span>
      <br>
      <span class="secondLine">$10,000</span>
      <br>
      <span class="thirdLine">PER MONTH</span>
      <br>
      <span class="fourthLine">AS A POPULAR INVESTOR</span>
    </p>
  </div>
  <div class="badges2">
    <p>
      <span>GETUPTO</span>
      <br>
      <span>GETUPTO</span>
      <br>
      <span>GETUPTO</span>
      <br>
      <span>GETUPTO</span>
      <br>
    </p>
  </div>
</div>
<div class="cap">capture btn</div>
<a href="" id='download'></a>

CSS

a {
  text-decoration: none;
}

.firstLine {
  padding-top: 30px;
  font-size: 24px;
  font-weight: 300;
}

.secondLine {
  font-size: 36px;
  line-height: 36px;
  font-weight: 600;
}

.thirdLine {
  font-size: 26px;
  line-height: 32px;
  font-weight: 300;
}

.fourthLine {
  font-size: 12px;
  font-weight: 300;
  position: relative;
  top: -10px;
}

.badges2 p span {
  font-size: 74px;
  font-family: "Work Sans", sans-serif;
  -webkit-background-clip: text;
  background-image: linear-gradient(115deg, rgb(252, 0, 255), rgb(0, 219, 222));
  color: transparent;
  text-transform: uppercase;
  font-weight: 800;
}

.badges {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 30px 0 0 30px;
  background: #552F87;
  border-radius: 100%;
  color: #FFF;
  line-height: 25px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Open Sans", sans-serif;
  -webkit-animation: 3s ease-in-out 0s normal none infinite running swing;
  -moz-animation: 3s ease-in-out 0s normal none infinite running swing;
  -o-animation: 3s ease-in-out 0s normal none infinite running swing;
  animation: 3s ease-in-out 0s normal none infinite running swing;
  -webkit-transform-origin: 100px -71px;
  -moz-transform-origin: 100px -71px;
  -o-transform-origin: 100px -71px;
  transform-origin: 100px -71px;
}

.badges p {
  float: left;
  width: 100%;
  margin-top: 40px;
}

.badges:before {
  content: '';
  position: absolute;
  top: 90px;
  left: 90px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  -webkit-box-shadow: 0px -82px 0px -2px #fff, 0px -100px #552F87, 20px -98px #552F87, 39px -94px #552F87, 56px -85px #552F87, 71px -72px #552F87, 83px -57px #552F87, 93px -40px #552F87, 98px -20px #552F87, 100px 0px #552F87, -20px -98px #552F87, -39px -94px #552F87, -71px -72px #552F87, -56px -85px #552F87, -83px -57px #552F87, -93px -40px #552F87, -98px -20px #552F87, -100px 0px #552F87, 0px 100px #552F87, -20px 98px #552F87, -39px 94px #552F87, -56px 85px #552F87, -71px...

JavaScript

$(document).ready(function() {
  $('.cap').click(function() {
    html2canvas($('#contaner'), {
      onrendered: function(canvas) {
        var a = $('#download').get(0);
        a.href = canvas.toDataURL("image/png")
        a.download = 'somefilename.png';
        a.click();
      }
    });
  });
});