JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>餐廳訂位範本</title>

    <style>
        img {
            max-width: 100%;
            height: auto;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .slider-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 300px;
            /*調整滑軌間距*/
            margin-bottom: 10px;
        }

        .slider {
            width: auto;
        }

        form {
            margin: 0 auto;
            max-width: 600px;
        }

        .dashed-fieldst {
            border-style: dotted;
            cursor: pointer;

        }

        h1,
        p {
            text-align: center;
        }
    </style>
    <script>
        function submitForm() {
            // 取得表單資料
            var name = document.getElementById("name").value;
            var email = document.getElementById("email").value;
            var phone = document.getElementById("phone").value;
            var restaurant = document.getElementById("restaurant").value;
            var date = document.getElementById("date").value;
            var time = document.getElementById("time").value;
            var numberOfPeople = document.getElementById("numberOfPeople").value;
            var specialRequests = document.getElementById("specialRequests").value;

            // 假設這裡使用 AJAX 或其他方式將資料傳送到伺服器端進行處理

            // 清空表單
            document.getElementById("name").value = "";
            document.getElementById("email").value = "";
            document.getElementById("phone").value = "";
            document.getElementById("restaurant").value = "";
            document.getElementById("date").value = "";
           ...