रिएक्ट और D3.js के साथ इंटरैक्टिव विश्व मानचित्र

1705 fance

संपादक में खोलें अपना कोड प्रकाशित करें

रिएक्ट और D3.js के साथ इंटरैक्टिव विश्व मानचित्र

अनुशंसित

23 August 2025

फ़िंगरप्रिंट डिज़ाइन के साथ HTML CSS लॉगिन पृष्ठ

13 November 2024

छवियों के लिए 3D CSS फोटो फ्रेम प्रभाव

26 March 2025

jQuery और CSS3 का उपयोग करके प्रगति पट्टी के साथ बहु-चरणीय फ़ॉर्म

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",
                      }}>
                      Global Network
                    </h1>
                    <p style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                      Interactive visualization of {totalCountries} countries
                    </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",
                      }}>
                      Countries
                    </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"}}>
                        World Map
                      </h2>
                      <div style={{fontSize: "0.875rem", color: "#94a3b8"}}>
                        Hover over countries to see details
                      </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>

अनुशंसित

फ़िंगरप्रिंट डिज़ाइन के साथ HTML CSS लॉगिन पृष्ठ

छवियों के लिए 3D CSS फोटो फ्रेम प्रभाव

jQuery और CSS3 का उपयोग करके प्रगति पट्टी के साथ बहु-चरणीय फ़ॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS