<div class="tabs">
        <div class="tabs-list">
            <a class="tab active">
                <span class="icon sm"><i class="fas fa-image"></i></span>
                <span>Pictures</span>
            </a>
            <a class="tab">
                <span class="icon sm"><i class="fas fa-music"></i></span>
                <span>Music</span>
            </a>
            <a class="tab">
                <span class="icon sm"><i class="fas fa-film"></i></span>
                <span>Videos</span>
            </a>
            <a class="tab">
                <span class="icon sm"><i class="far fa-file-alt"></i></span>
                <span>Documents</span>
                <span class="badge sm info">New</span>
            </a>
        </div>

        <div class="tabs-content">
            <div class="tab-panel active"><h1>Pictures</h1></div>
            <div class="tab-panel"><h1>Music</h1></div>
            <div class="tab-panel"><h1>Videos</h1></div>
            <div class="tab-panel"><h1>Documents</h1></div>
        </div>
    </div>
    

    <div class="tabs tabs-grow">
        <div class="tabs-list">
            <a class="tab active"
                ><span class="icon sm"><i class="fas fa-image"></i></span
            ></a>
            <a class="tab"
                ><span class="icon sm"><i class="fas fa-music"></i></span
            ></a>
            <a class="tab"
                ><span class="icon sm"><i class="fas fa-film"></i></span
            ></a>
            <a class="tab"
                ><span class="icon sm"><i class="far fa-file-alt"></i></span
            ></a>
            <div class="flex-1">
                <div class="group justify-end">
                    <input
                        class="input xs"
                        placeholder="Search"
                        style="width: 200px"
                    />
                    <button class="button xs">Search</button>
                </div>
            </div>
        </div>

        <div class="tabs-content">
            <div class="tab-panel active"><h1>Pictures</h1></div>
            <div class="tab-panel"><h1>Music</h1></div>
            <div class="tab-panel"><h1>Videos</h1></div>
            <div class="tab-panel"><h1>Documents</h1></div>
        </div>
    </div>
    

    <div class="tabs vertical">
        <div class="tabs-list">
            <a class="tab active"
                ><span class="icon sm"><i class="fas fa-image"></i></span
                ><span>Pictures</span></a
            >
            <a class="tab"
                ><span class="icon sm"><i class="fas fa-music"></i></span
                ><span>Music</span></a
            >
            <a class="tab"
                ><span class="icon sm"><i class="fas fa-film"></i></span
                ><span>Videos</span></a
            >
            <a class="tab"
                ><span class="icon sm"><i class="far fa-file-alt"></i></span
                ><span>Documents</span><span class="badge sm info">New</span></a
            >
            <div class="flex-1 my-1">
                <div class="group">
                    <input
                        class="input xs"
                        placeholder="Search"
                        style="width: 100%"
                    />
                    <button class="button xs">Search</button>
                </div>
            </div>
        </div>
        <div class="tabs-content">
            <div class="tab-panel active"><h1>Pictures</h1></div>
            <div class="tab-panel"><h1>Music</h1></div>
            <div class="tab-panel"><h1>Videos</h1></div>
            <div class="tab-panel"><h1>Documents</h1></div>
        </div>
    </div>
    

    <div class="tabs reverse">
        <div class="tabs-list">
            <a class="tab active"
                ><span class="icon sm"><i class="fas fa-image"></i></span
                ><span>Pictures</span></a
            >
            <a class="tab"
                ><span class="icon sm"><i class="fas fa-music"></i></span
                ><span>Music</span></a
            >
            <a class="tab"
                ><span class="icon sm"><i class="fas fa-film"></i></span
                ><span>Videos</span></a
            >
            <a class="tab"
                ><span class="icon sm"><i class="far fa-file-alt"></i></span
                ><span>Documents</span><span class="badge sm info">New</span></a
            >
            <div class="flex-1">
                <div class="group justify-end">
                    <input
                        class="input xs"
                        placeholder="Search"
                        style="width: 200px"
                    />
                    <button class="button xs">Search</button>
                </div>
            </div>
        </div>
        <div class="tabs-content">
            <div class="tab-panel active"><h1>Pictures</h1></div>
            <div class="tab-panel"><h1>Music</h1></div>
            <div class="tab-panel"><h1>Videos</h1></div>
            <div class="tab-panel"><h1>Documents</h1></div>
        </div>
    </div>