JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

JavaScript

const period = [
  { symbol: "H", name: "Hydrogen", atomicNumber: 1 },
  { symbol: "He", name: "Helium", atomicNumber: 2 },
  { symbol: "Li", name: "Lithium", atomicNumber: 3 },
  { symbol: "Be", name: "Beryllium", atomicNumber: 4 },
  { symbol: "B", name: "Boron", atomicNumber: 5 },
  { symbol: "C", name: "Carbon", atomicNumber: 6 },
  { symbol: "N", name: "Nitrogen", atomicNumber: 7 },
  { symbol: "O", name: "Oxygen", atomicNumber: 8 },
  { symbol: "F", name: "Fluorine", atomicNumber: 9 },
  { symbol: "Ne", name: "Neon", atomicNumber: 10 },
  { symbol: "Na", name: "Sodium", atomicNumber: 11 },
  { symbol: "Mg", name: "Magnesium", atomicNumber: 12 },
  { symbol: "Al", name: "Aluminum", atomicNumber: 13 },
  { symbol: "Si", name: "Silicon", atomicNumber: 14 },
  { symbol: "P", name: "Phosphorus", atomicNumber: 15 },
  { symbol: "S", name: "Sulfur", atomicNumber: 16 },
  { symbol: "Cl", name: "Chlorine", atomicNumber: 17 },
  { symbol: "K", name: "Potassium", atomicNumber: 19 },
  { symbol: "Ar", name: "Argon", atomicNumber: 18 },
  { symbol: "Ca", name: "Calcium", atomicNumber: 20 },
  { symbol: "Sc", name: "Scandium", atomicNumber: 21 },
  { symbol: "Ti", name: "Titanium", atomicNumber: 22 },
  { symbol: "V", name: "Vanadium", atomicNumber: 23 },
  { symbol: "Cr", name: "Chromium", atomicNumber: 24 },
  { symbol: "Mn", name: "Manganese", atomicNumber: 25 },
  { symbol: "Fe", name: "Iron", atomicNumber: 26 },
  { symbol: "Ni", name: "Nickel", atomicNumber: 28 },
  { symbol: "Co", name: "Cobalt", atomicNumber: 27 },
  { symbol: "Cu", name: "Copper", atomicNumber: 29 },
  { symbol: "Zn", name: "Zinc", atomicNumber: 30 },
  { symbol: "Ga", name: "Gallium", atomicNumber: 31 },
  { symbol: "Ge", name: "Germanium", atomicNumber: 32 },
  { symbol: "As", name: "Arsenic", atomicNumber: 33 },
  { symbol: "Se", name: "Selenium", atomicNumber: 34 },
  { symbol: "Br", name: "Bromine", atomicNumber: 35 },
  { symbol: "Kr", name: "Krypton", atomicNumber: 36 },
  { symbol: "Rb",...