JSFiddle - React, Tailwind, and code Playground
by ckissi
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>FINALE</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link
href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1368.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#myTable {
border-collapse: collapse;
width: 100%;
}
#myTable th,
#myTable td {
text-align: left;
padding: 8px;
}
#myTable th {
background-color: darkcyan;
font-weight: bold;
}
#myTable tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tr {
color: white;
}
.chart-container {
margin-left: 0px;
padding: 20px;
}
canvas {
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Roboto", sans-serif;
}
</style>
</head>
<body class="w3-light-grey">
<!-- Page Container -->
<div class="w3-content w3-margin-top" style="max-width: 1400px">
<!-- The Grid -->
<div class="w3-row-padding">
<!-- Left Column -->
<div class="w3-third">
<div class="w3-white w3-text-grey w3-card-4">
<div class="w3-display-container">
...