JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pickleball Property Analytics</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      .property-card {
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease;
      }
      .property-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      .loading {
        animation: pulse 2s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.5;
        }
      }
    </style>
  </head>

  <body class="bg-gray-100 min-h-screen">
    <section class="max-w-7xl mx-auto px-4 py-8">
      <!-- Header -->
      <header class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">
          Pickleball Property Analytics
        </h1>

        <!-- Stats -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <div class="bg-white p-4 rounded-lg shadow">
            <div class="text-sm text-gray-600">Active Listings</div>
            <div id="listingCount" class="text-xl font-bold">-</div>
          </div>
          <div class="bg-white p-4 rounded-lg shadow">
            <div class="text-sm text-gray-600">Avg. Price</div>
            <div id="avgPrice" class="text-xl font-bold">-</div>
          </div>
          <div class="bg-white p-4 rounded-lg shadow">
            <div class="text-sm text-gray-600">Avg. DOM</div>
            <div id="avgDOM" class="text-xl font-bold">-</div>
          </div>
          <div class="bg-white p-4 rounded-lg shadow">
            <div class="text-sm text-gray-600">Avg. Price/Sqft</div>
            <div id="avgPricePerSqft" class="text-xl font-bold">-</div>
          </div>
        </div>

        <!-- Filters -->
        <div class="flex flex-wrap gap-2">
          <button
...