Buttons with Icon

This tailwind example is contributed by _Amar_, on 09-Jul-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Social media links,

Button Button Group Social media buttons

Author _Amar_

Tailwind v3.4 16.8k 12

Fork Fullscreen

<section class="flex flex-col md:flex-row">
    <div class="flex-1 m-6">
        <p class="text-lg text-center">Left icon</p>
        <hr class="my-2">
        <div class="flex flex-wrap justify-center">
            <button class="bg-black rounded-lg text-white text-xs text-center self-center px-3 py-2 my-2 mx-2"><i class="fab fa-github mr-1"></i> Github</button>
            <button class="bg-blue-700 rounded-lg text-white text-xs text-center self-center px-3 py-2 my-2 mx-2"><i class="fab fa-facebook mr-1"></i> Facebook</button>
            <button class="bg-red-700 rounded-lg text-white text-xs text-center self-center px-3 py-2 my-2 mx-2"><i class="fab fa-youtube mr-1"></i> Youtube</button>
            <button class="bg-red-500 rounded-lg text-white text-xs text-center self-center px-3 py-2 my-2 mx-2"><i class="fab fa-laravel mr-1"></i> Laravel</button>
            <button class="bg-green-200 text-green-800 rounded-lg text-xs text-center self-center px-3 py-2 my-2 mx-2"><i class="fab fa-vuejs mr-1"></i> VueJS</button>
        </div>
    </div>
    <div class="flex-1 m-6">
        <p class="text-lg text-center">Right icon</p>
        <hr class="my-2">
        <div class="flex flex-wrap justify-center">
            <button class="bg-black rounded-lg text-white text-xs text-center self-center px-3 py-2 my-2 mx-2">Github <i class="fab fa-github ml-1"></i></button>
            <button class="bg-blue-700 rounded-lg text-white text-xs text-center self-center px-3 py-2 my-2 mx-2">Facebook <i class="fab fa-facebook ml-1"></i></button>
            <button class="bg-red-700 rounded-lg text-white text-xs text-center self-center px-3 py-2 my-2 mx-2">Youtube <i class="fab fa-youtube ml-1"></i></button>
            <button class="bg-red-500 rounded-lg text-white text-xs text-center self-center px-3 py-2 my-2 mx-2">Laravel <i class="fab fa-laravel ml-1"></i></button>
            <button class="bg-green-200 text-green-800 rounded-lg text-xs text-center self-center px-3 py-2 my-2 mx-2">VueJS <i class="fab fa-vuejs ml-1"></i></button>
        </div>
    </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/js/all.min.js"></script>