JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
 <label>Paduak with no font-size property declared</label>
  <div class="select unicode">
    <select id="standard-select" class="unicode">
      <option value="Option 1">တစ်ခုရွေးချယ်ပါ</option>
      <option value="Option 2">အနားယူချိန်တွင်</option>
      <option value="Option 3">အနားယူချိန်မှာ</option>
      <option value="Option 4">အဆက်မပြတ်ခြင်း</option>
      <option value="Option 5">စောင့်ကြပ်ခြင်း</option>
      <option value="Option 5">Option 5</option>
      <option value="Option length">
        Option that has too long of a value to fit
      </option>
    </select>
  </div>
  <label>Paduak with eclared font-size property, same font-size</label>
  <div class="select unicode">
    <select class="unicode font-size">
      <option value="Option 1">တစ်ခုရွေးချယ်ပါ</option>
      <option value="Option 2">အနားယူချိန်တွင်</option>
      <option value="Option 3">အနားယူချိန်မှာ</option>
      <option value="Option 4">အဆက်မပြတ်ခြင်း</option>
      <option value="Option 5">စောင့်ကြပ်ခြင်း</option>
      <option value="Option 5">Option 5</option>
      <option value="Option length">
        Option that has too long of a value to fit
      </option>
    </select>
  </div>
  
  <label>Paduak with declared font-size property, larger font-size</label>
  <div class="select padauk">
    <div class="padauk" style="font-size: 2em;
    min-height: 2em; position: relative; left:0; top:0; pointer-events: none; z-index: 2;"></div>
    <select class="padauk" style="font-size: 2em;
    min-height: 2em; position: relative; left:0; top:0; z-index: 1;">
      <option value="Option 1">တစ်ခုရွေးချယ်ပါ</option>
      <option value="Option 2">အနားယူချိန်တွင်</option>
      <option value="Option...

CSS

@font-face {
  font-family: "Padauk";
}

.padauk {
  font-family: "Padauk";
  text-rendering: optimizeLegibility;
  overflow: visible;
}

JavaScript

$(document).ready(function() {
    $('.select').select2();
});