<script src="https://cdn.tailwindcss.com"></script>

<div class="w-full mt-30 container py-20 px-4 mx-auto">
<div class="group relative">
  <a onclick="$(this).toggleClass('btn-special-active'); return false;" title="Press to toggle Special Offers" href="#" class="relativebtn--special inline-block p-2 text-sm mr-0 mx-md-4 font-semibold w-auto text-red-600 border-2 border-red-600 bg-white rounded-lg hover:text-white active:text-white hover:bg-red-600 active:bg-red-600">                              <i class="far fa-badge-dollar mr-1" aria-hidden="true"></i> Special Offer                       
</a>
      <span
      class="border rounded border-red-100 bg-red-50 py-1 px-3 text-red-600 text-xs pointer-events-none absolute -top-12 text-xs left-0 w-60 opacity-0 transition-opacity group-hover:opacity-100"
    >
      Toggle button to show/hide businesses that have Special Offers.
    </span>
  </div>
  
</div>