JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div style="font-family: sans-serif; max-width: 650px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
  <h2 style="color: #333; text-align: center;">Economic Mechanism: Carbon Tax</h2>
  <p style="text-align: center; color: #666;">See how internalizing costs reduces pollution and generates revenue.</p>
  
  <div style="margin: 20px 0; padding: 15px; background: #f4f4f9; border-radius: 8px; border: 1px solid #ccc;">
    <label style="font-weight: bold;">Carbon Tax Rate: $<span id="taxDisplay">20</span> / ton</label>
    <input type="range" id="taxSlider" min="0" max="80" value="20" style="width: 100%; margin: 10px 0 20px 0;">
    
    <label style="font-weight: bold;">Consumer Demand (Curve Steepness): <span id="elasticityDisplay">Normal</span></label>
    <input type="range" id="elasticitySlider" min="0.5" max="2" step="0.1" value="1" style="width: 100%; margin-top: 10px;">
  </div>

  <div style="text-align: center; margin-bottom: 15px; font-size: 1.1em; background: #e8f5e9; padding: 10px; border-radius: 5px;">
    <strong>New Equilibrium Quantity:</strong> <span id="eqQuantity" style="color: #2e7d32; font-weight: bold;">40</span> units of pollution<br>
    <strong style="color: purple;">Tax Revenue Generated:</strong> $<span id="taxRevenue" style="font-weight: bold;">800</span>
  </div>
  
  <canvas id="econChart"></canvas>
</div>

<script>
  const ctx = document.getElementById('econChart').getContext('2d');
  let chart;

  function updateChart() {
    const tax = parseFloat(document.getElementById('taxSlider').value);
    const elasticity = parseFloat(document.getElementById('elasticitySlider').value);
    
    document.getElementById('taxDisplay').innerText = tax;
    
    // Update Elasticity Label
    let elLabel = "Normal";
    if(elasticity < 1) elLabel = "More Elastic (Flatter)";
    if(elasticity > 1) elLabel = "More...