JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>

    <!-- Loading Screen -->
    <div class="loader" id="loader">
        <h1>11 Months of Crisis</h1>
        <p style="color: #999; margin-bottom: 30px;">Analyzing Sexual Violence in Bangladesh</p>
        <div class="loader-stats">
            <div class="loader-stat">
                <div class="loader-number">4,394</div>
                <div class="loader-label">Cases in 2024</div>
            </div>
            <div class="loader-stat">
                <div class="loader-number">13</div>
                <div class="loader-label">Daily Average</div>
            </div>
            <div class="loader-stat">
                <div class="loader-number">65%</div>
                <div class="loader-label">Child Victims</div>
            </div>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <h1>11 Months of Sexual Violence in Bangladesh</h1>
            <p class="subtitle">August 2024 - June 2025: A Comprehensive Analysis of the Crisis</p>
            
            <div class="key-metrics">
                <div class="metric-card">
                    <div class="metric-number">4,787</div>
                    <div class="metric-label">Total Reported Cases</div>
                </div>
                <div class="metric-card">
                    <div class="metric-number">2,862</div>
                    <div class="metric-label">Child Victims</div>
                </div>
                <div class="metric-card">
                    <div class="metric-number">&lt;1%</div>
               ...