<div class="col-span-2 bg-white border rounded p-6 mr-8">

    <a href="#" class="btn-bs-dark uppercase tracking-wider">
        <i class="fad fa-layer-plus mr-2"></i>
        Compose
    </a>
    <hr class="my-6">

    <ul>
        <li class="my-5 mt-0">
            <a class="btn-indigo text-left" href="#">
                <i class="text-xs fad fa-inbox mr-1"></i>
                inbox
            </a>
        </li>
        

        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-xs fad fa-paper-plane mr-1"></i>
                sent
            </a>
        </li>


        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-xs fad fa-star mr-1"></i>
                Marked
            </a>
        </li>
        

        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-xs fad fa-inbox-in mr-1"></i>
                draft
            </a>
        </li>
        

        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-xs fad fa-inbox-out mr-1"></i>
                sent
            </a>
        </li>
        

        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-xs fad fa-trash mr-1"></i>
                trash
            </a>
        </li>

        <!-- seprator -->
        <hr class="my-10">

        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-indigo-700 fad fa-dot-circle mr-1"></i>
                Custom Work
            </a>
        </li>


        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-gray-700 fad fa-dot-circle mr-1"></i>
                Important 
            </a>
        </li>


        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-green-700 fad fa-dot-circle mr-1"></i>
                work
            </a>
        </li>


        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-yellow-700 fad fa-dot-circle mr-1"></i>
                design
            </a>
        </li>


        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-red-700 fad fa-dot-circle mr-1"></i>
                laravel
            </a>
        </li>

        <li>
            <a class="btn text-left text-gray-800 bg-white hover:bg-gray-100 hover:text-gray-900" href="#">
                <i class="text-teal-800 fad fa-dot-circle mr-1"></i>
                add new label
            </a>
        </li>       
        
    </ul>

</div>