Tailwind CSS Stripe Checkout Button

There are 2 types for the checkout buttons. While one of them is the standard checkout button, the other one is suited to be used for a dark or even highlighted option.

page.tsx

    <button 
        onClick={() => handleCheckout(price)}
        className="mx-auto flex w-full items-center justify-center rounded-full bg-boilerplateNavy px-4 py-5 text-sm font-medium text-white duration-[0.2s] hover:shadow-[0px_11px_24px_-13px_rgba(10,_8,_38,_0.50)] active:shadow-[0px_21px_34px_-13px_rgba(10,_8,_38,_0.50)]">
        Get started now
        <MdChevronRight className="mt-0.5 h-4 w-4" />
    </button>

page.tsx

    <button
        className="mx-auto flex h-[54px] w-full items-center justify-center rounded-full bg-white/30 px-4 py-5 text-sm font-medium text-white duration-[0.2s] hover:bg-white/40 active:bg-white/50 "
        onClick={() => handleCheckout(price)}
    >
        {subscription ? 'Manage' : 'Get started now'}
        <MdChevronRight className="mt-0.5 h-4 w-4" />
    </button>

Tailwind CSS Chat AI Tailwind CSS Dashboard Tables