JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<!-- Dialog 自定义内容 -->
<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

<!-- Slider or Range 滑块选择器 -->
<input type="range" />

<!-- ColorPicker 取色器 -->
<input type="color" />


<!--  Progress 进度条 -->
<progress value="70" max="100"></progress>

<!-- Collpase 折叠 -->
<details>
  <summary>Show/Hide me</summary>
  <p>Pellentesque habitant</p>
</details>

<!-- AutoComplete 自动完成 -->
<input list="browsers" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
</datalist>

<!-- 右键菜单 -->
<div contextmenu="popup-menu">
  Right-click to see the adjusted context menu
</div>
<menu type="context" id="popup-menu">
  <menuitem type="checkbox" onclick="toggleOption()"
    checked="true">Checkbox</menuitem>
  <menuitem type="command" label="Command" icon="icon.png"
    onclick="doSomething()">Checkbox</menuitem>
  <menuitem type="radio" name="group1" onclick="option()"
    checked="true">Radio button 1</menuitem>
  <menuitem type="radio" name="group1"
    onclick="option()">Radio button 2</menuitem>
</menu>