JSFiddle - React, Tailwind, and code Playground

by Manawe

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Water Quality Dashboard</title>
    <!-- Include Tailwind CSS -->
    <link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="max-w-lg mx-auto mt-10 p-6 rounded-lg shadow-md bg-white">
        <h1 class="text-3xl font-bold text-center mb-8 uppercase tracking-wider">Water Quality Dashboard</h1>
        <div class="flex items-center justify-center h-40 bg-green-500 text-white text-6xl font-bold rounded-lg shadow-lg mb-8">
            Water Quality is Good
        </div>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 rounded w-full uppercase tracking-wider transition duration-200 ease-in-out">Submit Report</button>
    </div>
</body>
</html>