Aqua UI components

<button class="btn">Default</button>
            <button class="btn btn-disabled">disabled</button>
            <button class="btn btn-primary">Primary</button>
            <button class="btn btn-primary btn-disabled">Primary disabled</button>

<dialog open class="dialog">
            <div class="dialog-header">
              <button class="dialog-atom dialog-atom-close">Close window</button>
              <div class="dialog-heading">
                <h2 class="dialog-heading-title">Heading</h2>
              </div>
              <ul class="dialog-atoms">
                <li>
                  <button type="button" class="dialog-atom dialog-atom_maximize">
                    Maximize window
                  </button>
                </li>
                <li>
                  <button type="button" class="dialog-atom dialog-atom_minimize">
                    Minimize window
                  </button>
                </li>
              </ul>
            </div>
            <div class="dialog-content">
              <p>Greetings, one and all!</p>
            </div>
          </dialog>

<label for="file">File progress:</label>
            <progress id="file" max="100" value="70" class="progress">
              <div style="width: 70%">70 out of 100</div>
            </progress>
            <label for="fuel">Fuel level:</label>
            <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50" class="progress">
              <div style="width: 45%">45 out of 100</div>

<label for="default">Default</label>
          <input type="text" id="default" placeholder="default" class="text-field" />

<label for="nested-checkbox" class="checkbox">
            <input type="checkbox" id="nested-checkbox" />
            <div class="checkbox-box"></div>
            Checkbox
          </label>
          <label for="nested-checkbox-checked" class="checkbox">
            <input type="checkbox" id="nested-checkbox-checked" checked />
            <div class="checkbox-box"></div>
            Checked checkbox
          </label>

 <label for="nested-radio">
          <input type="radio" id="nested-radio" class="radio" />
          Nested check
        </label>
        <label for="radio-checked"> Nested checked check </label>
        <input type="radio" id="radio-checked" class="radio" checked />

<div class="scroll"></div>

<table class="table">
          <thead>
            <tr>
              <th>Header 1</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Cell 1</td>
            </tr>
          </tbody>
        </table>

<i class="icon icon-apple-logo">Apple logo</i>