More elements

Tabs

Text Tooltip Pagination

Pagination

« 1 2 3 4 5 6 »


<div class="tab">
    <a href="elements2.html">Text Tooltip</a>
    <a class="active">Pagination</a>
</div>

<!-- Tab content -->
<div class="tabcontent">
    <h3>Pagination</h3>
    <div class="pagination">
        <a href="#">«</a>
        <a href="#">1</a>
        <a class="active" href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">»</a>
    </div>    
                     
</div>

Accordion

Lorem ipsum...


<div class="accordion-container">
    <button class="button outline accordion">Section 1 <i class="fas fa-plus"></i></button>
    <div class="panel">
        <p>Lorem ipsum...</p>
    </div>
    
    <button class="button outline accordion">Section 2 <i class="fas fa-plus"></i></button>
    <div class="panel">
        <p>Lorem ipsum...</p>
    </div>
    
    <button class="button outline accordion">Section 3 <i class="fas fa-plus"></i></button>
    <div class="panel">
        <p>Lorem ipsum...</p>
    </div> 
</div>

Range input


<input type="range" min="1" max="100" value="50" >
<input type="range" min="1" max="100" value="50" class="primary">
<input type="range" min="1" max="100" value="50" class="success">
<input type="range" min="1" max="100" value="50" class="warning">
<input type="range" min="1" max="100" value="50" class="danger">
<input type="range" min="1" max="100" value="50" class="dark">

Multi range input


<input multiple type="range" min="1" max="100" data-values="50 90" >
<input multiple type="range" min="1" max="100" data-values="50 90" class="primary">
<input multiple type="range" min="1" max="100" data-values="50 90" class="success">
<input multiple type="range" min="1" max="100" data-values="50 90" class="warning">
<input multiple type="range" min="1" max="100" data-values="50 90" class="danger">
<input multiple type="range" min="1" max="100" data-values="50 90" class="dark">