Aqua UI components

Modern Tailwind CSS with vintage Mac OS 9

npm install tailwind-aqua-ui

Buttons

<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>

Popup modal window

<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>

Heading

Greetings, one and all!


Progress Bar

70 out of 100
45 out of 100
<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>

Text Fields

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

Checkbox

<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>

Radio

 <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 />

Scroll bar

Lorem ipsum dolor sit.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus itaque, nobis numquam dolore, earum reiciendis ipsum molestiae quibusdam commodi, voluptatem distinctio nihil quos ut tempore modi! Optio laborum, quae repudiandae praesentium ut suscipit aperiam sunt perspiciatis ad harum sit, enim saepe provident!

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

Tables

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

Icons

finder remote-access recent-documents recent-applications network-browser
<i class="icon icon-apple-logo">Apple logo</i>