Design a Guestbook in Tailwind CSS

Last Updated : 28 Apr, 2025

The Guestbook is a web application designed to collect guest information including their name, address, mobile number, and room number. It provides a simple and intuitive interface for the users to input their details and view them in a list format.

ag1

Prerequisites

Approach

In this approach, we are Creating a form with Name, address, Mobile no, and room number.
On submitting that information it will append a div to the bottom of the form and the field of the form will get empty for further information.
By using the classes of Tailwind CSS we are making it responsive for small devices.
We are creating a delete button for every guest so that we can delete that guest.
We are also creating a Delete All button that will delete all the guest list at once.

Example: This example shows the implementation of the above-explained appraoch.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>The Guestbook</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
          rel="stylesheet">
    <style>
        body {
            background-color: #48bb78;
        }

        .guest-form-container {
            max-height: 80vh;
            overflow-y: auto;
        }
    </style>
</head>

<body class="flex justify-center items-center h-screen">
    <div class="container mx-auto md:w-1/2 bg-white p-8
                 rounded-lg shadow-md guest-form-container">
        <h1 class="text-3xl font-bold text-center mb-8"
            >Guestbook</h1>
        <form id="guestForm" class="space-y-4">
            <div class="flex flex-col">
                <label for="name" class="text-gray-700">
                  Name:</label>
                <input type="text" id="name" name="name" 
                       required 
                       class="border border-gray-300 rounded-md px-4 
                              py-2 focus:outline-none 
                              focus:border-blue-500">
            </div>
            <div class="flex flex-col">
                <label for="address" class="text-gray-700">
                  Address:</label>
                <input type="text" id="address" 
                       name="address" required
                    class="border border-gray-300 rounded-md px-4
                           py-2 focus:outline-none focus:border-blue-500">
            </div>
            <div class="flex flex-col">
                <label for="mobile" class="text-gray-700">
                  Mobile:</label>
                <input type="tel" id="mobile" name="mobile" 
                       required pattern="[0-9]*"
                    class="border border-gray-300 rounded-md
                           px-4 py-2 focus:outline-none 
                           focus:border-blue-500">
            </div>
            <div class="flex flex-col">
                <label for="roomno" class="text-gray-700">
                  Room Number:</label>
                <input type="text" id="roomno"
                       name="roomno" required
                    class="border border-gray-300 rounded-md 
                           px-4 py-2 focus:outline-none 
                           focus:border-blue-500">
            </div>
            <div class="flex justify-between">
                <button type="submit"
                    class="bg-blue-500 text-white py-2 px-4
                           rounded-md hover:bg-blue-600 focus:outline-none">
                  Add Guest</button>
                <button id="clearBtn"
                    class="bg-red-500 text-white py-2 px-4
                           rounded-md hover:bg-red-600 
                           focus:outline-none">
                  Clear All</button>
            </div>
        </form>
        <div id="guestList" class="mt-8"></div>
    </div>
    <script>
        const guestForm = document.getElementById('guestForm');
        const guestList = document.getElementById('guestList');
        function createGuestCard(name, address, mobile, roomno) {
            const guestCard = document.createElement('div');
            guestCard.classList.add('bg-gray-200', 'p-4', 'rounded-md', 'mb-4');
            guestCard.innerHTML = `
                <h2 class="text-xl font-bold">${name}</h2>
                <p><strong>Address:</strong> ${address}</p>
                <p><strong>Mobile:</strong> ${mobile}</p>
                <p><strong>Room Number:</strong> ${roomno}</p>
                <div class="flex justify-between mt-2">
                    <button class="bg-red-500 text-white px-3 py-1 
                    rounded-md hover:bg-red-600
                    focus:outline-none delete-btn">Delete</button>
                </div>`;
            return guestCard;
        }
        function addGuest(name, address, mobile, roomno) {
            const guestCard = createGuestCard(name, address, mobile, roomno);
            guestList.appendChild(guestCard);
        }
        function clearGuests() {
            guestList.innerHTML = '';
        }
        guestForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const name = document.getElementById('name').value;
            const address = document.getElementById('address').value;
            const mobile = document.getElementById('mobile').value;
            const roomno = document.getElementById('roomno').value;
            addGuest(name, address, mobile, roomno);
            guestForm.reset();
        });
        guestList.addEventListener('click', function (e) {
            if (e.target.classList.contains('delete-btn')) {
                e.target.closest('.bg-gray-200').remove();
            }
        });
        const clearBtn = document.getElementById('clearBtn');
        clearBtn.addEventListener('click', clearGuests);
    </script>
</body>

</html>

Output:

ag1

Design a Guestbook in Tailwind CSS

mguru4c05q

Improve

Article Tags :

Design a Guestbook in Tailwind CSS

Prerequisites

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?