JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<p>Value type</p>

<p><select>
    <option value="plaintext" selected>Plain text</option>
    <option value="session">User's profile</option>
    <option value="appstorage">App storage</option>
    <option value="query">Query parameter</option>
  </select></p>

<hr>

<p>Logic</p>

<p><select>
<optgroup>
    <option value="empty">Is empty</option>
    <option value="notempty">Is not empty</option>
    <option value="==" selected>Equals</option>
    <option value="!=">Doesn't equal</option>
    <option value="oneof">Is one of</option>
</optgroup>
<optgroup label="Text">
    <option value="contains">Text contains</option>
    <option value="notcontain">Text doesn't contain</option>
    <option value="regex">Text matches regex</option>
</optgroup>
<optgroup label="Number">
    <option value=">">Is greater than</option>
    <option value=">=">Is greater or equal to</option>
    <option value="<">Is less than</option>
    <option value="<=">Is less or equal to</option>
    <option value="between">Is between</option>
</optgroup>
<optgroup label="Date">
    <option value="dateis">Date is</option>
    <option value="datebefore">Date is before</option>
    <option value="dateafter">Date is after</option>
    <option value="datebetween">Date is between</option>
</optgroup>
  </select></p>

<hr>

<p>Date</p>

<p><select>
<optgroup>
    <option value="today" selected>Current date (Today)</option>
    <option value="now">Current date &amp; time (Now)</option>
    </optgroup>
<optgroup label="&mdash;">
<option value="nowaddminutes">Now + number of minutes</option>
    <option value="nowaddhours">Now + number of hours</option>
    <option value="todayadddays">Today + number of days</option>
    <option value="todayaddmonths">Today + number of months</option>
    <option value="todayaddyears">Today + number of years</option>
    </optgroup>
<optgroup label="&mdash;">
<option value="nowsubtractminutes">Now - number of minutes</option>
    <option value="nowsubtracthours">Now -...