JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<form id="dropdowns" action="index.html">
			
			<label>Country:</label>
				<select id="country" name="country">
					<option value="000">-Select Country-</option>
				</select>
			
			<br />
			
			<label>State:</label>
				<select id="state" name="network">
					<option value="000">-Select State-</option>
				</select>
			
			<br />
			
			<label>City:</label>
				<select id="model" name="model">
					<option value="000">-Select City-</option>
				</select>
			
			<br />
				
		</form>

JavaScript

var myJson = {
    "country": [
        {
            "name": "United States",
            "id": "usa",
            "states": [
                {
                    "name": "State 1 USA",
                    "id": "usaState1",
                    "cities": [
                        {
                            "name": "City 1",
                            "id": "usaState1City1",
                            "area": "12345 sqkm"
                        },
                        {
                            "name": "City 2",
                            "id": "usaState1City2",
                            "area": "12345 sqkm"
                        }
                    ]
                },
                {
                    "name": "State 2 USA",
                    "id": "usaState2",
                    "cities": [
                        {
                            "name": "City 3",
                            "id": "usaState2City3",
                            "area": "12345 sqkm"
                        },
                        {
                            "name": "City 4",
                            "id": "usaState2City4",
                            "area": "12345 sqkm"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Australia",
            "id": "aus",
            "states": [
                {
                    "name": "State 1 Australia",
                    "id": "ausState1",
                    "cities": [
                        {
                            "name": "City 5",
                            "id": "ausState1City5",
                            "area": "12345 sqkm"
                        },
                        {
                            "name": "City 6",
                            "id": "ausState1City6",
                            "area": "12345 sqkm"
                        }
                    ]
                },
                {
             ...