JSFiddle - React, Tailwind, and code Playground

by Snaptik

HTML

<style>
    .country-flag {
      width: 30px;
      height: 20px;
      margin-right: 10px;
    }
  </style>

  <select id="country-select">
    <option value="">-- Select a country --</option>
    <option value="usa">
      <img class="country-flag" src="https://flagcdn.com/w20/us.png" alt="USA Flag"> USA
    </option>
<option style="background-image:url(https://www.worldometers.info/img/flags/af-flag.gif);">male</option>
    <option value="japan">
      <img class="country-flag" src="https://flagcdn.com/w20/jp.png" alt="Japan Flag"> Japan
    </option>
    <option value="brazil">
      <img class="country-flag" src="https://flagcdn.com/w20/br.png" alt="Brazil Flag"> Brazil
    </option>
    <option value="australia">
      <img class="country-flag" src="https://flagcdn.com/w20/au.png" alt="Australia Flag"> Australia
    </option>
  </select>

  <div id="country-info">

<p id="country-text"></p>
  </div>

  <script>
    const countrySelect = document.getElementById('country-select');
    const countryText = document.getElementById('country-text');

    countrySelect.addEventListener('change', () => {
      const selectedCountry = countrySelect.value;

      switch (selectedCountry) {
        case 'usa':
          countryText.innerHTML = '<h3>United States of America</h3><p>The USA is a federal republic located in North America, consisting of 50 states and a federal district. It is known for its diverse geography, vibrant culture, and powerful economy.</p>';
          break;
        case 'canada':
          countryText.innerHTML = '<h3>Canada</h3><p>Canada is a country in North America, known for its vast, diverse landscapes, rich cultural heritage, and strong economy. It is the second-largest country in the world by total area.</p>';
          break;
        case 'japan':
          countryText.innerHTML = '<h3>Japan</h3><p>Japan is an island country in East Asia, known for its unique culture, advanced technology, and vibrant cities. It is a highly developed...