<div class="bg-gray-50">
    <div class="container mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
        <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
            <span class="block">Track Order</span>
        </h2>
        <p class="py-4 text-gray-500 text-lg tracking-wide w-full md:w-3/5 mx-auto text-center">
            Enter your Order ID or Tracking Number
        </p>
        <form action="" method="post" class="mx-auto w-full md:w-3/5">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-0 gap-y-3 md:gap-3">
                <div class="col-span-2">
                    <input type="text" name="text" id="text" placeholder="Enter your Order ID.."
                        class="w-full bg-white px-5 py-6 border border-gray-100 rounded-md h-12 shadow">
                </div>
                <div>
                    <button type="submit"
                    class="block w-full text-center md:inline-flex items-center justify-center px-5 py-3 rounded-md border
                    border-transparent text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
                        >Check now</button>
                </div>
            </div>
        </form>
    </div>
</div>

                

                    const TrackOrder = () => {
    return (
        <div className="bg-gray-50">
            <div className="container mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
                <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                    <span className="block">Track Order</span>
                </h2>
                <p className="py-4 text-gray-500 text-lg tracking-wide w-full md:w-3/5 mx-auto text-center">
                    Enter your Order ID or Tracking Number
                </p>
                <form action method="post" className="mx-auto w-full md:w-3/5">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-0 gap-y-3 md:gap-3">
                        <div className="col-span-2">
                            <input
                                type="text"
                                name="text"
                                id="text"
                                placeholder="Enter your Order ID.."
                                className="w-full bg-white px-5 py-6 border border-gray-100 rounded-md h-12 shadow"
                            />
                        </div>
                        <div>
                            <button
                                type="submit"
                                className="block w-full text-center md:inline-flex items-center justify-center px-5 py-3 rounded-md border
              border-transparent text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
                            >
                                Check now
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
}

export default TrackOrder;