JSFiddle - React, Tailwind, and code Playground

by Madhushanka Rathnayake

HTML

<select id="country">
  <option selected disabled>Select…</option>
  <option value="au">Australia</option>
  <option value="hr">Croatia (Hrvatska)</option>
  <option value="cz">Czech Republic</option>
  <option value="fi">Finland</option>
  <option value="fr">France</option>
  <option value="jp">Japan</option>
  <option value="kr">Korea</option>
  <option value="li">Liechtenstein</option>
  <option value="lu">Luxembourg</option>
  <option value="nl">Netherlands</option>
  <option value="nz">New Zealand</option>
  <option value="us">United States</option>
</select>
<p id="shipping-time" class="shipping-time"></p>

CSS

* {
  font-family: sans-serif;
}
.shipping-time {
  font-size: 14px;
  display: none;
}
.shipping-time span {
  display: block;
}

JavaScript

var j = jQuery;
( function () {
	j( document ).on( 'change', '#country', function( e ) {
  	var country = j( this ).val();
    var days = get_days( country );
    j( '#shipping-time' ).html( 'One-time Delivery<span>' + days + ' Days<span>' ).show();
  } );
} )( j )

function get_days( country ) {
  var countries = {
    'au' : 30,
    'hr' : 45,
    'cz' : 45,
    'fi' : 45,
    'fr' : 30,
    'jp' : 45,
    'kr' : 45,
    'li' : 45,
    'lu' : 45,
    'nl' : 30,
    'nz' : 45,
    'us' : 30,
  }
  return countries[ country ];
}