JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Style the button */
        .add-content-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <!-- Button to add content -->
    <button class="add-content-button" onclick="addContent()">Add Content</button>

    <!-- Container to display added content -->
    <div id="content-container"></div>

    <script>
        // Function to add content
        function addContent() {
            // Create a new element (e.g., a paragraph)
            var newContent = document.createElement("p");
            newContent.textContent = "New content added!";

            // Append the new element to the content container
            var contentContainer = document.getElementById("content-container");
            contentContainer.appendChild(newContent);
        }
    </script>
</body>
</html>