JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
<link rel="stylesheet" href="https://www.sky.com.br/o/sky-site-theme/css/main.min.0.css">
<link rel="stylesheet" href="https://www.sky.com.br/o/sky-site-theme/css/main.min.1.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="sky-main">
  <section data-componente-type="gadget_products_services_banners" data-componente-id="CORCOM80" class="gadget_products_services_banners"> <div class="container sky-container clearfix"> <div class="gadget_title_area clearfix"> <div data-componente-type="gadget_title_area_row" data-componente-id="CORCOM80" class="row"> <div class="col-sm-12 col-xs-12"> <h2 class="pull-left">Pacotes e Serviços</h2> </div> </div> </div> <div class="gadget_service_block_list"> <ul> <li class="gadget_service_block"> <div class="clearfix border_block"> <img src="https://www.sky.com.br/documents/1407842/1833669/proxy+%282%29.jpg/3fa9a61c-9d11-0e52-7f96-8e92881cd984?t=1515078638540" class="col-sm-12 img-responsive" title="SKY PRÉ-PAGO" alt="Sky Pre-pago"> <h2 class="title_service" style="color:#e10052;"> SKY PRÉ-PAGO </h2> <a class="btn btn-sky pink download" href="javascript:;" data-gtm-type="conheca-pre-pago" data-gtm-category="home" data-gtm-action="pacotes-e-servicos" data-gtm-label=""> <span class="icon sky-icones-seta-direita"></span> DOWNLOAD PDF</a> </div> </li> <li class="gadget_service_block"> <div class="clearfix border_block"> <img src="https://www.sky.com.br/documents/1407842/1833669/proxy+%281%29.jpg/460e841d-f786-a8cf-7c16-64940a4df9f6?t=1515078638043" class="col-sm-12 img-responsive" title="SKY BANDA LARGA" alt="Banda Larga"> <h2 class="title_service" style="color:#e26614;"> SKY BANDA LARGA </h2> <a class="btn btn-sky pink" href="http://www.skybandalarga.com.br/" target="_self" data-gtm-type="" data-gtm-category="home"...

CSS

#sky-main{background:white}
a{color: red;font-weight: 700;}
*{font-family: Verdana}
thead{background:black; color: white}
table{width: 80%;font-size: 20px;}

JavaScript

var doc = new jsPDF('p', 'pt', 'a4');

var options = {
	//'width': 800
};

doc.addHTML($('#sky-main'), 10, 10, options, function(){
    doc.save('html.pdf');
});

/*
doc.setFontStyle('normal');

doc.fromHTML($('#teste').get(0), 20, 20,{'width': 500});

doc.save('test.pdf');
*/