Examples with TailwindCSS

These examples use Tailwind CSS. Make sure you have it installed to apply the utility classes shown.

Button with Icon

<button class="px-5 py-2 bg-blue-600 text-white rounded flex items-center gap-2">
    <i class="mc mc-diamond"></i> Download
</button>

Alert with Icon

Creeper is near! Watch out!

<div class="flex items-center gap-3 p-4 bg-yellow-100 text-yellow-900 border-l-4 border-yellow-400 rounded">
    <i class="mc mc-creeper-head text-2xl"></i>
    Creeper is near! Watch out!
</div>

Menu List

Explore
Crafting
Storage

<ul class="space-y-2">
    <li class="flex items-center gap-2">
        <i class="mc mc-map"></i> Explore
    </li>
    <li class="flex items-center gap-2">
        <i class="mc mc-crafting-table"></i> Crafting
    </li>
    <li class="flex items-center gap-2">
        <i class="mc mc-ender-chest"></i> Storage
    </li>
</ul>

Badge Status

Online

<span class="inline-flex items-center gap-1 text-green-700 bg-green-100 px-3 py-1 rounded text-sm">
    <i class="mc mc-emerald"></i> Online
</span>

Browse All Icons