Carte du monde React D3 avec données de régions et de pays

103 A3 MARKETPLACE

Ouvrir dans l'éditeur Publiez votre code

Carte du monde React D3 avec données de régions et de pays

Recommandé

22 August 2025

Blogium : Modèle HTML de blog sur la technologie, le design et la vie

28 September 2025

Animation de chargement CSS : Ellipse Loader

19 October 2024

Site Web de portfolio de développeur HTML

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Global Network - Countries World Map</title>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://unpkg.com/topojson-client@3"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

body {
        font-family: "Inter", sans-serif;
        background: linear-gradient(to bottom right, #020617, #0f172a, #020617);
        color: #f8fafc;
        min-height: 100vh;
      }

.container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 1.5rem;
      }

.card {
        background: rgba(30, 41, 59, 0.4);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(148, 163, 184, 0.1);
        border-radius: 1rem;
        padding: 1.5rem;
      }

.country-card {
        background: rgba(30, 41, 59, 0.6);
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 0.75rem;
        padding: 0.75rem;
        transition: all 0.2s;
        cursor: pointer;
      }

.country-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      }

.region-button {
        width: 100%;
        text-align: left;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        transition: all 0.2s;
        border: 1px solid transparent;
        background: transparent;
        color: #cbd5e1;
        cursor: pointer;
      }

.region-button:hover {
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.3);
      }

.region-button.active {
        background: #3b82f6;
        color: white;
        font-weight: 600;
      }

.stat-bar {
        height: 8px;
        border-radius: 4px;
        transition: width 0.5s ease;
      }

.tooltip {
        position: fixed;
        background: rgba(30, 41, 59, 0.95);
        backdrop-filter: blur(12px);
        border: 2px solid #3b82f6;
        border-radius: 0.75rem;
        padding: 1rem;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        pointer-events: none;
        z-index: 1000;
      }

svg {
        width: 100%;
        height: 100%;
      }

svg .country {
        transition: all 0.2s ease;
      }

@media (max-width: 1024px) {
        .grid-responsive {
          grid-template-columns: 1fr !important;
        }
      }

@media (max-width: 767px) and (min-width: 640px) {
        .grid-responsive {
          grid-template-columns: 1fr !important;
          grid-template-rows: 600px auto auto !important;
          gap: 1.5rem !important;
        }

.map-section {
          grid-column: 1 !important;
          grid-row: 1 !important;
        }

.middle-row {
          grid-column: 1 !important;
          grid-row: 2 !important;
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: 1.5rem !important;
        }

.countries-section {
          grid-column: 1 !important;
          grid-row: 3 !important;
        }

.sidebar-section {
          display: none !important;
        }
      }

@media (max-width: 639px) {
        .grid-responsive {
          grid-template-columns: 1fr !important;
          grid-template-rows: 500px auto auto auto !important;
          gap: 1.5rem !important;
        }

.map-section {
          grid-column: 1 !important;
          grid-row: 1 !important;
        }

.regions-mobile {
          grid-column: 1 !important;
          grid-row: 2 !important;
          display: block !important;
        }

.statistics-mobile {
          grid-column: 1 !important;
          grid-row: 3 !important;
          display: block !important;
        }

.countries-section {
          grid-column: 1 !important;
          grid-row: 4 !important;
        }

.sidebar-section,
        .middle-row {
          display: none !important;
        }
      }

.middle-row,
      .regions-mobile,
      .statistics-mobile {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const {useState, useEffect, useRef} = React;

const regions = [
        {
          name: "Southeast Asia",
          color: "#10b981",
          countries: [
            {name: "Singapore", code: "SGP", coordinates: [1.3521, 103.8198]},
            {name: "Thailand", code: "THA", coordinates: [15.87, 100.9925]},
            {name: "Indonesia", code: "IDN", coordinates: [-0.7893, 113.9213]},
            {name: "Vietnam", code: "VNM", coordinates: [14.0583, 108.2772]},
            {name: "Philippines", code: "PHL", coordinates: [12.8797, 121.774]},
            {name: "Brunei", code: "BRN", coordinates: [4.5353, 114.7277]},
            {name: "Cambodia", code: "KHM", coordinates: [12.5657, 104.991]},
          ],
        },
        {
          name: "South Asia",
          color: "#3b82f6",
          countries: [
            {name: "India", code: "IND", coordinates: [20.5937, 78.9629]},
            {name: "Bangladesh", code: "BGD", coordinates: [23.685, 90.3563]},
            {name: "Sri Lanka", code: "LKA", coordinates: [7.8731, 80.7718]},
            {name: "Pakistan", code: "PAK", coordinates: [30.3753, 69.3451]},
            {name: "Nepal", code: "NPL", coordinates: [28.3949, 84.124]},
          ],
        },
        {
          name: "East Asia",
          color: "#8b5cf6",
          countries: [
            {name: "China", code: "CHN", coordinates: [35.8617, 104.1954]},
            {name: "Japan", code: "JPN", coordinates: [36.2048, 138.2529]},
            {
              name: "South Korea",
              code: "KOR",
              coordinates: [35.9078, 127.7669],
            },
            {name: "Taiwan", code: "TWN", coordinates: [23.6978, 120.9605]},
          ],
        },
        {
          name: "Middle East",
          color: "#f59e0b",
          countries: [
            {
              name: "Saudi Arabia",
              code: "SAU",
              coordinates: [23.8859, 45.0792],
            },
            {name: "Qatar", code: "QAT", coordinates: [25.3548, 51.1839]},
            {
              name: "Emirates",
              code: "ARE",
              coordinates: [23.4241, 53.8478],
            },
            {name: "Oman", code: "OMN", coordinates: [21.4735, 55.9754]},
            {name: "Syria", code: "SYR", coordinates: [34.8021, 38.9968]},
            {name: "Jordan", code: "JOR", coordinates: [30.5852, 36.2384]},
          ],
        },
        {
          name: "Europe",
          color: "#ec4899",
          countries: [
            {
              name: "United Kingdom",
              code: "GBR",
              coordinates: [55.3781, -3.436],
            },
            {name: "France", code: "FRA", coordinates: [46.2276, 2.2137]},
            {name: "Germany", code: "DEU", coordinates: [51.1657, 10.4515]},
            {name: "Italy", code: "ITA", coordinates: [41.8719, 12.5674]},
            {name: "Spain", code: "ESP", coordinates: [40.4637, -3.7492]},
            {name: "Türkiye", code: "TUR", coordinates: [38.9637, 35.2433]},
          ],
        },
        {
          name: "Africa",
          color: "#ef4444",
          countries: [
            {name: "Egypt", code: "EGY", coordinates: [26.8206, 30.8025]},
            {name: "Morocco", code: "MAR", coordinates: [31.7917, -7.0926]},
            {
              name: "South Africa",
              code: "ZAF",
              coordinates: [-30.5595, 22.9375],
            },
            {name: "Kenya", code: "KEN", coordinates: [-0.0236, 37.9062]},
          ],
        },
        {
          name: "Oceania",
          color: "#06b6d4",
          countries: [
            {name: "Australia", code: "AUS", coordinates: [-25.2744, 133.7751]},
            {
              name: "New Zealand",
              code: "NZL",
              coordinates: [-40.9006, 174.886],
            },
          ],
        },
      ];

const WIDTH = 1200;
      const HEIGHT = 600;

const projection = d3
        .geoMercator()
        .scale(WIDTH / (2 * Math.PI))
        .translate([WIDTH / 2, HEIGHT / 2]);

const pathGenerator = d3.geoPath().projection(projection);

function findRegionForCountryCode(code) {
        for (const r of regions) {
          if (r.countries.some((c) => c.code === code)) return r;
        }
        return null;
      }

function findRegionForCountryName(name) {
        for (const r of regions) {
          if (r.countries.some((c) => c.name === name || c.code === name))
            return r;
        }
        return null;
      }

const latLngToXYOld = (lat, lng) => {
        const x = ((lng + 180) / 360) * WIDTH;
        const y = ((90 - lat) / 180) * HEIGHT;
        return {x, y};
      };

function InteractiveWorldMap({selectedRegion}) {
        const svgRef = useRef(null);
        const [geojson, setGeojson] = useState(null);
        const [selectedCountry, setSelectedCountry] = useState(null);
        const [mousePos, setMousePos] = useState({x: 0, y: 0});
        const [hoveredCode, setHoveredCode] = useState(null);
        const mapContainerRef = useRef(null);

useEffect(() => {
          const url =
            "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson";
          d3.json(url)
            .then((data) => {
              setGeojson(data);
            })
            .catch((err) => {
              console.error("Failed to load GeoJSON:", err);
            });
        }, []);

useEffect(() => {
          if (!geojson) return;
          const svg = d3.select(svgRef.current);
          svg.selectAll("*").remove();

const defs = svg.append("defs");
          defs
            .append("pattern")
            .attr("id", "grid")
            .attr("width", 40)
            .attr("height", 40)
            .attr("patternUnits", "userSpaceOnUse")
            .append("path")
            .attr("d", "M 40 0 L 0 0 0 40")
            .attr("fill", "none")
            .attr("stroke", "#334155")
            .attr("stroke-width", 0.5)
            .attr("opacity", 0.3);

svg
            .append("rect")
            .attr("width", WIDTH)
            .attr("height", HEIGHT)
            .attr("fill", "url(#grid)");

const worldGroup = svg.append("g").attr("class", "world-base");
          worldGroup
            .selectAll("path")
            .data(geojson.features)
            .join("path")
            .attr("d", pathGenerator)
            .attr("fill", "rgba(148,163,184,0.04)")
            .attr("stroke", "rgba(148,163,184,0.06)")
            .attr("stroke-width", 0.3);

const featureByName = new Map();
          geojson.features.forEach((f) => {
            const n =
              f.properties && f.properties.name
                ? f.properties.name.toLowerCase()
                : null;
            if (n) featureByName.set(n, f);
          });

const countryGroup = svg
            .append("g")
            .attr("class", "translated-countries");
          const unmatched = [];

regions.forEach((region) => {
            region.countries.forEach((c) => {
              if (selectedRegion && region.name !== selectedRegion) {
                return;
              }

const targetNameLower = c.name.toLowerCase();

let feature =
                featureByName.get(targetNameLower) ||
                featureByName.get(
                  targetNameLower.replace("turkiye", "turkey")
                ) ||
                featureByName.get(
                  targetNameLower.replace(
                    "united kingdom",
                    "united kingdom of great britain and northern ireland"
                  )
                ) ||
                null;

if (!feature) {
                for (const [k, f] of featureByName.entries()) {
                  if (
                    k.includes(targetNameLower) ||
                    targetNameLower.includes(k)
                  ) {
                    feature = f;
                    break;
                  }
                }
              }

if (!feature) {
                unmatched.push(c.name);
                return;
              }

const g = countryGroup
                .append("g")
                .attr("class", "country-wrapper");
              const path = g
                .append("path")
                .datum(feature)
                .attr("d", pathGenerator)
                .attr("fill", region.color)
                .attr("opacity", selectedRegion ? 0.3 : 0.15)
                .attr("stroke", region.color)
                .attr("stroke-width", selectedRegion ? 0.8 : 0.4)
                .style("cursor", "pointer");

let centroid;
              try {
                centroid = pathGenerator.centroid(feature);
                if (!Array.isArray(centroid) || isNaN(centroid[0])) {
                  const bounds = pathGenerator.bounds(feature);
                  centroid = [
                    (bounds[0][0] + bounds[1][0]) / 2,
                    (bounds[0][1] + bounds[1][1]) / 2,
                  ];
                }
              } catch (e) {
                const bounds = pathGenerator.bounds(feature);
                centroid = [
                  (bounds[0][0] + bounds[1][0]) / 2,
                  (bounds[0][1] + bounds[1][1]) / 2,
                ];
              }

const desired = projection([c.coordinates[1], c.coordinates[0]]);
              const dx = desired[0] - centroid[0];
              const dy = desired[1] - centroid[1];

g.attr("transform", `translate(${dx},${dy})`);

g.on("mouseenter", (event) => {
                setHoveredCode(c.code);
                setSelectedCountry(c);

const mapRect = mapContainerRef.current.getBoundingClientRect();
                const relativeX = event.clientX - mapRect.left;
                const relativeY = event.clientY - mapRect.top;

setMousePos({x: relativeX, y: relativeY});
                path
                  .transition()
                  .duration(120)
                  .attr("opacity", selectedRegion ? 0.6 : 0.45);
              });

g.on("mousemove", (event) => {
                const mapRect = mapContainerRef.current.getBoundingClientRect();
                const relativeX = event.clientX - mapRect.left;
                const relativeY = event.clientY - mapRect.top;

setMousePos({x: relativeX, y: relativeY});
              });

g.on("mouseleave", () => {
                setHoveredCode(null);
                setSelectedCountry(null);
                path
                  .transition()
                  .duration(120)
                  .attr("opacity", selectedRegion ? 0.3 : 0.15);
              });

g.append("circle")
                .attr("cx", desired[0] - dx)
                .attr("cy", desired[1] - dy)
                .attr("r", selectedRegion ? 10 : 8)
                .attr("fill", region.color)
                .attr("opacity", selectedRegion ? 0.8 : 0.6)
                .style("pointer-events", "none");

g.append("circle")
                .attr("cx", desired[0] - dx)
                .attr("cy", desired[1] - dy)
                .attr("r", selectedRegion ? 5 : 4)
                .attr("fill", region.color)
                .style("pointer-events", "none");
            });
          });

if (unmatched.length) {
            console.warn(
              "Some country names could not be matched to GeoJSON features:",
              unmatched
            );
          }

svg
            .append("line")
            .attr("x1", 0)
            .attr("y1", HEIGHT / 2)
            .attr("x2", WIDTH)
            .attr("y2", HEIGHT / 2)
            .attr("stroke", "#475569")
            .attr("stroke-width", 1)
            .attr("opacity", 0.5)
            .attr("stroke-dasharray", "5,5");

svg
            .append("line")
            .attr("x1", WIDTH / 2)
            .attr("y1", 0)
            .attr("x2", WIDTH / 2)
            .attr("y2", HEIGHT)
            .attr("stroke", "#475569")
            .attr("stroke-width", 1)
            .attr("opacity", 0.5)
            .attr("stroke-dasharray", "5,5");
        }, [geojson, selectedRegion]);

return (
          <div
            ref={mapContainerRef}
            style={{
              position: "relative",
              width: "100%",
              height: "100%",
              background: "rgba(15, 23, 42, 0.5)",
              borderRadius: "0.75rem",
              overflow: "hidden",
            }}>
            <svg
              ref={svgRef}
              viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
              style={{width: "100%", height: "100%", maxHeight: "600px"}}
            />

{selectedCountry && (
              <div
                className="tooltip tooltip-left"
                style={{
                  left: `${mousePos.x}px`,
                  top: `${mousePos.y}px`,
                }}>
                <div
                  style={{
                    fontWeight: "bold",
                    fontSize: "1.125rem",
                    marginBottom: "0.25rem",
                  }}>
                  {selectedCountry.name}
                </div>
                <div style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                  {selectedCountry.coordinates[0].toFixed(2)}°,{" "}
                  {selectedCountry.coordinates[1].toFixed(2)}°
                </div>
                <div
                  style={{
                    fontSize: "0.75rem",
                    color: "#3b82f6",
                    marginTop: "0.25rem",
                  }}>
                  {
                    regions.find((r) =>
                      r.countries.some((c) => c.code === selectedCountry.code)
                    )?.name
                  }
                </div>
              </div>
            )}
          </div>
        );
      }

function RegionButtons({selectedRegion, setSelectedRegion}) {
        return (
          <div
            style={{display: "flex", flexDirection: "column", gap: "0.5rem"}}>
            <button
              onClick={() => setSelectedRegion(null)}
              className={`region-button ${!selectedRegion ? "active" : ""}`}>
              <span>All Regions ({regions.length})</span>
            </button>
            {regions.map((region) => (
              <button
                key={region.name}
                onClick={() => setSelectedRegion(region.name)}
                className={`region-button ${
                  selectedRegion === region.name ? "active" : ""
                }`}
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}>
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "0.5rem",
                  }}>
                  <div
                    style={{
                      width: "12px",
                      height: "12px",
                      borderRadius: "50%",
                      background: region.color,
                    }}></div>
                  <span>{region.name}</span>
                </div>
                <span style={{fontSize: "0.875rem", opacity: 0.7}}>
                  {region.countries.length}
                </span>
              </button>
            ))}
          </div>
        );
      }

function Statistics({regions, totalCountries}) {
        return (
          <div style={{display: "flex", flexDirection: "column", gap: "1rem"}}>
            {regions.map((region) => (
              <div key={region.name}>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    marginBottom: "0.5rem",
                    fontSize: "0.875rem",
                  }}>
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "0.5rem",
                    }}>
                    <div
                      style={{
                        width: "8px",
                        height: "8px",
                        borderRadius: "50%",
                        background: region.color,
                      }}></div>
                    <span>{region.name}</span>
                  </div>
                  <span style={{fontWeight: "bold"}}>
                    {region.countries.length}
                  </span>
                </div>
                <div
                  style={{
                    width: "100%",
                    height: "8px",
                    background: "rgba(51, 65, 85, 0.5)",
                    borderRadius: "4px",
                    overflow: "hidden",
                  }}>
                  <div
                    className="stat-bar"
                    style={{
                      width: `${
                        (region.countries.length / totalCountries) * 100
                      }%`,
                      background: region.color,
                    }}></div>
                </div>
              </div>
            ))}
          </div>
        );
      }

function App() {
        const totalCountries = regions.reduce(
          (acc, r) => acc + r.countries.length,
          0
        );
        const [selectedRegion, setSelectedRegion] = useState(null);

const filteredRegions = selectedRegion
          ? regions.filter((r) => r.name === selectedRegion)
          : regions;

return (
          <div style={{minHeight: "100vh"}}>
            <header
              style={{
                borderBottom: "1px solid rgba(148, 163, 184, 0.2)",
                backdropFilter: "blur(12px)",
                background: "rgba(2, 6, 23, 0.3)",
              }}>
              <div className="container" style={{padding: "1.5rem"}}>
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    flexWrap: "wrap",
                    gap: "1rem",
                  }}>
                  <div>
                    <h1
                      style={{
                        fontSize: "clamp(1.5rem, 4vw, 2rem)",
                        fontWeight: "bold",
                        marginBottom: "0.25rem",
                      }}>
                      SERVER Muhammad Hazrady Wijaya 
                    </h1>
                    <p style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                       MENAMPILKAN SERVER (Legal)
                    </p>
                  </div>
                  <div style={{textAlign: "right"}}>
                    <div
                      style={{
                        fontSize: "2.5rem",
                        fontWeight: "bold",
                        color: "#3b82f6",
                      }}>
                      {totalCountries}
                    </div>
                    <div
                      style={{
                        fontSize: "0.75rem",
                        color: "#94a3b8",
                        textTransform: "uppercase",
                        letterSpacing: "0.05em",
                      }}>
                      negara
                    </div>
                  </div>
                </div>
              </div>
            </header>
            <main className="container" style={{padding: "1.5rem"}}>
              <div
                className="grid-responsive"
                style={{
                  display: "grid",
                  gridTemplateColumns: "2fr 1fr",
                  gridTemplateRows: "600px auto",
                  gap: "1.5rem",
                }}>
                <div
                  className="map-section"
                  style={{gridColumn: "1", gridRow: "1"}}>
                  <div className="card" style={{height: "100%"}}>
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        marginBottom: "1rem",
                        flexWrap: "wrap",
                        gap: "0.5rem",
                      }}>
                      <h2 style={{fontSize: "1.25rem", fontWeight: "bold"}}>
                         BERIKUT TITIK SERVER Muhammad Hazrady Wijaya
                      </h2>
                      <div style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                        Sebagian Kecil Server Kepemilikan 
                      </div>
                    </div>
                    <div style={{height: "calc(100% - 60px)"}}>
                      <InteractiveWorldMap selectedRegion={selectedRegion} />
                    </div>
                  </div>
                </div>

<div
                  className="countries-section"
                  style={{gridColumn: "1", gridRow: "2"}}>
                  <div className="card">
                    <h2
                      style={{
                        fontSize: "1.25rem",
                        fontWeight: "bold",
                        marginBottom: "1.5rem",
                      }}>
                      {selectedRegion
                        ? `${selectedRegion} Countries`
                        : "All Countries"}
                    </h2>
                    <div
                      style={{
                        display: "grid",
                        gridTemplateColumns:
                          "repeat(auto-fill, minmax(150px, 1fr))",
                        gap: "0.75rem",
                      }}>
                      {filteredRegions.flatMap((region) =>
                        region.countries.map((country) => (
                          <div key={country.code} className="country-card">
                            <div
                              style={{
                                display: "flex",
                                alignItems: "center",
                                gap: "0.5rem",
                                marginBottom: "0.5rem",
                              }}>
                              <div
                                style={{
                                  width: "8px",
                                  height: "8px",
                                  borderRadius: "50%",
                                  background: region.color,
                                }}></div>
                              <div
                                style={{
                                  fontWeight: "600",
                                  fontSize: "0.875rem",
                                }}>
                                {country.name}
                              </div>
                            </div>
                            <div
                              style={{fontSize: "0.75rem", color: "#94a3b8"}}>
                              {country.coordinates[0].toFixed(1)}°,{" "}
                              {country.coordinates[1].toFixed(1)}°
                            </div>
                          </div>
                        ))
                      )}
                    </div>
                  </div>
                </div>

<div
                  className="sidebar-section"
                  style={{gridColumn: "2", gridRow: "1 / span 2"}}>
                  <div
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      gap: "1.5rem",
                    }}>
                    <div className="card">
                      <h3
                        style={{
                          fontSize: "1.125rem",
                          fontWeight: "bold",
                          marginBottom: "1rem",
                        }}>
                        Regions
                      </h3>
                      <RegionButtons
                        selectedRegion={selectedRegion}
                        setSelectedRegion={setSelectedRegion}
                      />
                    </div>

<div className="card">
                      <h3
                        style={{
                          fontSize: "1.125rem",
                          fontWeight: "bold",
                          marginBottom: "1rem",
                        }}>
                        Statistics
                      </h3>
                      <Statistics
                        regions={regions}
                        totalCountries={totalCountries}
                      />
                    </div>
                  </div>
                </div>

<div className="middle-row">
                  <div className="card">
                    <h3
                      style={{
                        fontSize: "1.125rem",
                        fontWeight: "bold",
                        marginBottom: "1rem",
                      }}>
                      Regions
                    </h3>
                    <RegionButtons
                      selectedRegion={selectedRegion}
                      setSelectedRegion={setSelectedRegion}
                    />
                  </div>

<div className="card">
                    <h3
                      style={{
                        fontSize: "1.125rem",
                        fontWeight: "bold",
                        marginBottom: "1rem",
                      }}>
                      Statistics
                    </h3>
                    <Statistics
                      regions={regions}
                      totalCountries={totalCountries}
                    />
                  </div>
                </div>

<div className="regions-mobile">
                  <div className="card">
                    <h3
                      style={{
                        fontSize: "1.125rem",
                        fontWeight: "bold",
                        marginBottom: "1rem",
                      }}>
                      Regions
                    </h3>
                    <RegionButtons
                      selectedRegion={selectedRegion}
                      setSelectedRegion={setSelectedRegion}
                    />
                  </div>
                </div>

<div className="statistics-mobile">
                  <div className="card">
                    <h3
                      style={{
                        fontSize: "1.125rem",
                        fontWeight: "bold",
                        marginBottom: "1rem",
                      }}>
                      Statistics
                    </h3>
                    <Statistics
                      regions={regions}
                      totalCountries={totalCountries}
                    />
                  </div>
                </div>
              </div>
            </main>
          </div>
        );
      }

ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

Recommandé

Blogium : Modèle HTML de blog sur la technologie, le design et la vie

Animation de chargement CSS : Ellipse Loader

Site Web de portfolio de développeur HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS