ve design 1</li>
    <li><code>.tab-style-02</code> : Alternative design 2</li>
    <li><code>.compact</code> : Compact size (half-sized paddings)</li>
</ul>

<br>

<h5>Tab Action States</h5>
<p>Petal tab UI ships with <code>hover</code>, <code>active</code>, <code>selected</code> and <code>disabled</code> states. Hover and active states are handled by CSS pseudo-classes so you don't need to do anything. But for selected state, you need to write your own JavaScript code for adding and removing class accordi