JSFiddle - React, Tailwind, and code Playground

by Joh_Christ

HTML

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<link href="https://medien.lb.madsack.de/rnd/jchrist/select.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<script src="https://kit.fontawesome.com/0a1d10f800.js" crossorigin="anonymous"></script>

<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">

<div style="height: 45px;margin-bottom: 10px;margin-top: 10px;">
<select id="countries" class="js-example-basic-single" style="width: 184px;">
</select>

<i id="reset" class="fas fa-undo" style="cursor: pointer; margin-left: 5px;color: #003f6e;"></i>


</div>

<div id="Weltweit"></div>

CSS

body {
    display: block;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.button .button:hover {
  background-color: #ffffff;
}

.button {
  background-color: white; 
  color: #373737; 
  border: 2px solid #003f6e;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
  font-size: 14px;
  font-family: Poppins;
  cursor: pointer;
}

.button:hover {
  background-color: #003f6e;
  color: white;
}

.button:focus {
  background-color: #003f6e;
  color: white;
  outline: 0;
  box-shadow: none!important;
}

.button-sel{
  background-color: #003f6e;
  color: white; 
  border: 2px solid #003f6e;
  border-radius: 4px;
  cursor: pointer;
  outline: 0;
  box-shadow: none!important;
}

input {
  font-family: Poppins;
}

div {
  font-size: 14px;
  line-height: 125%;
  color: #292929;
  font-weight: 400;
  font-family: Poppins;
}

span {
  font-size: 14px;
  line-height: 125%;
  color: #292929;
  font-weight: 400;
  font-family: Poppins;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  top: 30px;
  left: 15px;
  width: 225px;
  background-color: rgb(255, 255, 255, .9);
  color: #333333;
  text-align: left;
  border-radius: 2px;
  padding: 5px 5px 5px 5px;
  font-size: 14px;
  line-height: 125%;
  position: absolute;
  border-style: solid;
  border-color: #999999;
  border-width: 1px;
  z-index: 1000;
 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

JavaScript

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});


Highcharts.setOptions({
  colors: ['#0065b3'],
  lang: {
                     decimalPoint: ',',
                     thousandsSep: '.',
                     loading: 'Daten werden geladen...',
                     months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                     shortWeekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
                     weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
                     shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
                     exportButtonTitle: "Exportieren",
                     printButtonTitle: "Drucken",
                     rangeSelectorFrom: "",
                     rangeSelectorTo: "bis",
                     rangeSelectorZoom: "",
                     downloadPNG: 'Download als PNG-Bild',
                     downloadJPEG: 'Download als JPEG-Bild',
                     downloadPDF: 'Download als PDF-Dokument',
                     downloadSVG: 'Download als SVG-Bild',
                     resetZoom: "Zoom zurücksetzen",
                     resetZoomTitle: "Zoom zurücksetzen",
                     numericSymbols: null
  }
});

$(function () {
    $('#Weltweit').highcharts({
  chart: {
        height: 340,
        animation: false,
        spacingLeft: 0,
        spacingRight: 0,
        spacingTop: 0,
        spacingBottom: 20,
        marginTop: 10,
        marginLeft: 10,
        marginRight: 60,
        zoomType: 'x',
                    resetZoomButton: {
                        theme: {
                              style: {
                                      fontFamily: 'Poppins',
                                      fontWeight:'400',
                                      color:'#373737',
                                ...