Order Cancellation Modal - Copy this React, Tailwind Component to your project

@if($order->status-==-'In-Progress'-||-$order->status-==-'Shipped'-)-<div-class="btn_group">-<button-type="button"-class="gift_btn"-data-toggle="modal"-data-target="#cancelModal-{{-$order->id-}}">-Cancel-Order</button>-</div>-<div-class="modal-fade"-id="cancelModal-{{-$order->id-}}"-tabindex="-1"-role="dialog"-aria-labelledby="cancelModalLabel"-aria-hidden="true">-<div-class="modal-dialog"-role="document">-<div-class="modal-content">-<div-class="modal-header">-<h5-class="modal-title"-id="cancelModalLabel">Cancel-Order</h5>-<button-type="button"-class="close"-data-dismiss="modal"-aria-label="Close">-<span-aria-hidden="true">&times;</span>-</button>-</div>-<div-class="modal-body">-Are-you-sure-you-want-to-cancel-this-order?-</div>-<div-class="modal-footer">-<button-type="button"-class="btn-btn-secondary"-data-dismiss="modal">No</button>-<form-action="{{-route('cancel.order',-['id'-=>-$order->id])-}}"-method="post">-@csrf-<button-type="submit"-class="btn-btn-danger">Cancel-Order</button>-</form>-</div>-</div>-</div>-</div>-@endif