Modern Tailwind CSS with vintage Mac OS 9
npm install tailwind-aqua-ui
<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 />
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>
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>
<i class="icon icon-apple-logo">Apple logo</i>