JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<link rel="stylesheet" href="https://storage.googleapis.com/gpes-static/media-mensual-concentracion-co2/styles.css" type="text/css" media="screen" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>
<script src="https://static.greenpeace.es/media-mensual-concentracion-co2/data-labels-1.js" defer></script>
<script src="https://storage.googleapis.com/gpes-static/media-mensual-concentracion-co2/scripts.js" defer></script>
<!-- QUADRO CAMBIOS -->
<div id="co2_box">
    <div id="co2_box_m1">abril 2020: 416.21 ppm</div>
    <div id="co2_box_m2">abril 2019: 413.33 ppm</div>
    <div id="co2_box_updated">Ultima actualización: 29 de mayo</div>
</div>
<!-- /QUADRO CAMBIOS -->

<!-- GRAFICO CO2 -->
<div style="text-align: center; font-weight: 700; font-family: 'Work Sans', sans-serif; margin-top: 1.5em;">Media mensual concentración de CO2</div>
<div class="chart-container" style="position: relative; height:auto; width:100%;">
    <canvas id="co2_chart_by_year" width="350" height="280"></canvas>
</div>
<!-- /GRAFICO CO2 -->