Chemistry Lab Interface - Copy this Html, Tailwind Component to your project

Chemistry lab site and in it there are searching element by any info about it and weight elements and a periodic table when i click on any element(elements as buttons in a grid) on it the info of that element outs and all the data of the elements in json file i have like this : { "chemical_elements": [ { "name": "Hydrogen", "ar name": "الهيدروجين", "latin name": "Hydrogen", "symbol": "H", "atomic_number": 1, "atomic_mass": 1.008, "group": 1, "period": 1, "state": "gas", "element": "H", "melting_point": " 259.16", "boiling_point": " 252.87", "density": 0.00008988, "electronegativity": 2.20, "electron_configuration": "1s1", "discovery": { "year": 1766, "discoverer": "Henry Cavendish" }, "isotopes": [ { "name": "Hydrogen 1", "mass_number": 1, "abundance": "99.98%" }, { "name": "Hydrogen 2", "mass_number": 2, "abundance": "0.02%" } ], "crystal_structure": "hexagonal", "color": "colorless", "classification": "Non metal", "uses": [ "Rocket fuel", "Hydrogen fuel cells", "Ammonia production" ], "occurrence": "Natural", "radioactivity": "Stable" },