JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div
  class="MuiFormControl-root MuiDataGrid-filterFormColumnInput mui-q68e8e-MuiFormControl-root-MuiDataGrid-filterFormColumnInput"
>
  <label
    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-standard MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-standard mui-3pz106-MuiFormLabel-root-MuiInputLabel-root"
    data-shrink="true"
    for=":r31:"
    id=":r32:"
    >Columns</label
  >
  <div
    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl mui-1do8hru-MuiInputBase-root-MuiInput-root-MuiSelect-root"
  >
    <select
      class="MuiNativeSelect-select MuiNativeSelect-standard MuiInputBase-input MuiInput-input mui-1dmqq7i-MuiNativeSelect-select-MuiInputBase-input-MuiInput-input"
      aria-invalid="false"
      id=":r31:"
    >
      <option value="flagAuto">Auto update</option>
      <option value="document">Document Type</option>
      <option value="imageApproval">Approved</option>
      <option value="followUp">Follow Up</option>
      <option value="nationality">Nationality</option>
      <option value="validFrom">Issue Date</option>
      <option value="expiryDate">Expiry Date</option>
      <option value="applicationDate">Applied Date</option>
      <option value="active">Active</option></select
    ><svg
      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiNativeSelect-icon MuiNativeSelect-iconStandard mui-10bey84-MuiSvgIcon-root-MuiNativeSelect-icon"
      focusable="false"
      aria-hidden="true"
      viewBox="0 0 24 24"
      data-testid="ArrowDropDownIcon"
    >
      <path d="M7 10l5 5 5-5z"></path>
    </svg>
  </div>
</div>

JavaScript

console.log("hellow odf aave")