Shipping Rate Container - Copy this React, Tailwind Component to your project

.place-order-container { display: flex; justify-content: center; align-items: center; min-height: 60vh; margin: 40px; } .place-order-form { max-width: 800px; width: 100%; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 2rem; overflow: hidden; } .place-order-header { text-align: center; font-size: 1.8rem; font-weight: bold; color: #1d3c6b; margin-bottom: 2rem; } .place-order-header-icon { vertical-align: middle; margin-right: 0.5rem; } .place-order-form-row { display: flex; flex-wrap: wrap; gap: 1.5rem; } .place-order-form-section { flex: 1; padding: 1rem; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; } .place-order-cargo-section { display: flex; align-items: center; justify-content: center; } .place-order-cargo-icon { font-size: 3rem; color: #4299e1; } .place-order-arrow { font-size: 2rem; margin-left: 0.5rem; color: #2d3748; } .place-order-section-title { font-size: 1.2rem; font-weight: bold; color: #2d3748; margin-bottom: 1rem; } .place-order-form-group { margin-bottom: 1rem; } .place-order-form-group label { display: block; font-size: 0.9rem; color: #4a5568; margin-bottom: 0.5rem; } .place-order-form-group input { width: 100%; padding: 0.5rem; font-size: 0.9rem; color: #2d3748; border: 1px solid #cbd5e0; border-radius: 4px; transition: border-color 0.2s; } .place-order-form-group input:focus { border-color: #3182ce; box-shadow: 0 0 0 1px #3182ce; } .place-order-validation { color: #e53e3e; font-size: 0.8rem; margin-top: 0.25rem; } .place-order-footer { display: flex; justify-content: flex-end; margin-top: 2rem; } /* Button Styling */ .place-order-next-button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2rem; padding: 0.75rem 1.5rem; color: #ffffff; font-size: 1rem; font-weight: bold; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; width: 100%; } .place-order-next-button:disabled { background-color: #a0aec0; cursor: not-allowed; } .place-order-next-button:hover:not(:disabled) { background-color: #1d3c6b; } .button-icon { font-size: 1.2rem; } /* Responsive Design */ @media (max-width: 768px) { .form-row { flex-direction: column; gap: 1rem; } .sender-section, .receiver-section { max-width: 100%; /* Full width on smaller screens */ } .cargo-section { flex-direction: row; justify-content: center; gap: 1rem; } .cargo-icon { font-size: 2.5rem; } .arrow { font-size: 1.5rem; } } enhance my css and make it more unique professional i want icons for each field and i want label inside the field give me like that