Button Ui

"use client";

import React from "react";

export default function Example() {
    return (
        <div className="flex flex-wrap items-center justify-center gap-4 md:gap-10">
            <button type="button" className="w-40 py-3 active:scale-95 transition text-sm text-gray-500 border border-gray-300 rounded-lg bg-transparent"><p className="mb-0.5">message</p></button>
            <button type="button" className="w-40 py-3 active:scale-95 transition text-sm text-gray-500 border border-indigo-500 rounded-lg bg-transparent"><p className="mb-0.5">message</p></button>
            <button type="button" className="w-40 py-3 active:scale-95 transition text-sm text-gray-500 border border-indigo-500 rounded-lg bg-transparent flex items-center justify-center gap-1">
                <svg className="mt-0.5" width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fillRule="evenodd" clipRule="evenodd" d="M15.03 10.228c0 .1-.018.196-.046.286L10.58 5.78l4.45-3.46zm-13.073.963L6.42 6.436l1.69 1.278L9.727 6.43l4.535 4.762c-.071.016-12.234.016-12.305 0m-.769-.963v-7.91l4.45 3.46-4.403 4.736a1 1 0 0 1-.047-.286M14.537 1.33 8.108 6.273 1.682 1.33zm-.495-.988H2.177A1.98 1.98 0 0 0 .199 2.318v7.91c0 1.092.886 1.978 1.978 1.978h11.865a1.98 1.98 0 0 0 1.978-1.978v-7.91A1.98 1.98 0 0 0 14.042.341" fill="#6B7280"/>
                </svg>
                <p className="mb-0.5">message</p>
            </button>
            <button type="button" className="w-40 py-3 active:scale-95 transition text-sm text-gray-500 rounded-lg border border-gray-300 flex items-center justify-center gap-1">
                <svg className="mt-0.5" width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fillRule="evenodd" clipRule="evenodd" d="M15.03 10.228c0 .1-.018.196-.046.286L10.58 5.78l4.45-3.46zm-13.073.963L6.42 6.436l1.69 1.278L9.727 6.43l4.535 4.762c-.071.016-12.234.016-12.305 0m-.769-.963v-7.91l4.45 3.46-4.403 4.736a1 1 0 0 1-.047-.286M14.537 1.33 8.108 6.273 1.682 1.33zm-.495-.988H2.177A1.98 1.98 0 0 0 .199 2.318v7.91c0 1.092.886 1.978 1.978 1.978h11.865a1.98 1.98 0 0 0 1.978-1.978v-7.91A1.98 1.98 0 0 0 14.042.341" fill="#6B7280"/>
                </svg>
                <p className="mb-0.5">message</p>
            </button>
        </div>
    );
};