<nav>
  <a href="/">Menu item 1</a>
  <a href="/" class="on">Active menu item</a>
  <a href="/">Menu with number <sup>12</sup></a>
</nav>

<div class="content">
  <a href="#">Link to an URL</a> or <a href="#" class="j">JS interactive link</a>
</div>

<div class="content">
  <h1>Header 1</h1>
  <h2>Header 2</h2>
  <h3>Header 3</h3>
  <h4>Header 4</h4>
  <h5>Header 5</h5>
  <h6>Header 6</h6>
</div>

<div class="content">
  <div class="columns">
    <div style="width: 20%;">
      <h1>Column 1</h1>
      <p>Width 20%</p>
    </div>
    <div style="width: 50%;">
      <h1>Column 2</h1>
      <p>Width 50%</p>
    </div>
    <div>
      <h1>Column 3</h1>
    </div>
  </div>
</div>

<div class="content">
  <table>
    <tr><th></th><th>Name</th><th>Number (value right-aligned)</th><th>Actions</th></tr>
    <tr><td class="c">1.</td><td>PHPy</td><td class="r">0124</td><td></td></tr>
    <tr><td class="c">2.</td><td>CSSy</td><td class="r">0124</td><td></td></tr>
    <tr><td class="c">3.</td><td>Clickhousy</td><td class="r">0124</td><td><button class="mini">Settings</button></td></tr>
    <tr><td class="c">4.</td><td>Mysqly</td><td class="r">0124</td><td><button class="mini">Settings</button></td></tr>
  </table>
</div>

<div class="content">
  <div class="columns">
    <div>
      <ul>
        <li>Unordered list item 1<br/>multiline</li>
        <li>Unordered list item 2</li>
      </ul>
    </div>
    <div>
      <ol>
        <li>Ordered list item 1<br/>multiline</li>
        <li>Ordered list item 2</li>
      </ol>
    </div>
    <div>
      <ul class="e">
        <li>empty list item 1</li>
        <li>empty list item 2</li>
      </ul>
    </div>
    
    <div>
      <ul class="e ii">
        <li>inline list item 1</li>
        <li>inline list item 2</li>
      </ul>
    </div>
  </div>
</div>

alert('test');
// this is a comment

<div class="content">
  <p>This is a text with <code>inline code</code> and a code block:</p>
  <pre><code>alert('test');
// this is a comment</code></pre>
</div>

<div class="content">
  <i class="t">status</i>
  <i class="t ok">ok</i>
  <i class="t working">working</i>
  <i class="t error">error</i>
  <i class="t notice">notice</i>
  <i class="t warning">warning</i>
  <i class="t info">info</i>
  <i class="t new">new</i>
  <i class="t pending">pending</i>
  <i class="t action">action</i>
  <i class="t processing">action</i>
  <i class="t special">special</i>
</div>

<div class="content">
  <button>Submit</button>
  <button class="error">Remove</button>
  <button class="ok">Enable</button>
  <button class="warning">Retry</button>
  <button class="action">Proceed</button>
  <a class="button action">Link button</a>
  <button class="mini">Small button</button>
  <button class="mini warning">Small styled button</button>
</div>

<div class="content">
  <form>
    <h2>Form title</h2>
    <div class="cols">
      <div><fieldset><legend>Input your Name</legend><input type="text" placeholder="Name..."/></fieldset></div>
      <div><fieldset><legend>Last name</legend><input type="text" placeholder="Lastname..."/></fieldset></div>
      <div><fieldset><legend>Username</legend><input type="text" placeholder="Username..."/></fieldset></div>
      <div><fieldset><legend>Age</legend><input class="mini" type="text" placeholder="Age..."/></fieldset></div>
    </div>
    <div><fieldset>
      <legend>Hours</legend>
      <input class="mini" type="text" placeholder="From..."/>
      <b class="md"></b>
      <input class="mini" type="text" placeholder="To..."/>
    </fieldset></div>
    <fieldset><legend>Body</legend><textarea placeholder="Body..."></textarea></fieldset>
    <fieldset>
      <label><input type="checkbox" name="a" /> Chek 1</label>
      <label><input type="checkbox" name="b" /> Chek 2</label>
    </fieldset>
    <fieldset>
      <label><input type="radio" name="a" /> Radio 1</label>
      <label><input type="radio" name="a" /> Radio 2</label>
    </fieldset>
    <fieldset>
      <select>
        <option>Choose me...</option>
        <option>Option 1</option>
      </select>
      <legend>Selector</legend>
    </fieldset>
    <button>Submit</button>
    <button class="error">Remove</button>
  </form>
</div>

<div class="content">
  <form class="l">
    <fieldset>
      <legend>Title</legend>
      <input type="text" placeholder="From..."/>
    </fieldset>
    <fieldset>
      <label><input type="checkbox" name="a" /> Chek 1</label>
      <label><input type="checkbox" name="b" /> Chek 2</label>
    </fieldset>
    <fieldset>
      <select>
        <option>Choose me...</option>
        <option>Option 1</option>
      </select>
      <legend>Selector</legend>
    </fieldset>
    <button>Submit</button>
  </form>
</div>

<div class="dashboard">
  <div class="plate">
    <div>
      <b>123 432</b>
      <i>Downloads</i>
    </div>
  </div>
  
  <div class="plate">
    <div>
      <b>1 423</b>
      <i>Users</i>
    </div>
  </div>
</div>
<div class="dashboard">
  <div class="plate ok"> <div> <b>123</b> <i>Figure</i> </div> </div>
  <div class="plate error"> <div> <b>123</b> <i>Error</i> </div> </div>
  <div class="plate info"> <div> <b>123</b> <i>Info</i> </div> </div>
  <div class="plate warning"> <div> <b>123</b> <i>Warning</i> </div> </div>
  <div class="plate notice"> <div> <b>123</b> <i>Notice</i> </div> </div>
</div>