JSFiddle - React, Tailwind, and code Playground

by jimkennelly

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample name adder</title>
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">Sample name adder</h1>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <form id="todo-form">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control"
                                       id="todo-input" 
                                       placeholder="Add new name"
                                    required>
                                <button class="btn btn-primary" type="submit">
                                      Add
                                  </button>
                            </div>
                        </form>
                        <ul class="list-group" id="todo-list">
                            <!-- Tasks will be added here dynamically -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS Bundle (popper.js included) -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
    <script>
        // Function to add a new task
        function addTask(task) {
            const todoList = document.getElementById("todo-list");
            const li = document.createElement("li");
            li.className = "list-group-item d-flex justify-content-between align-items-center";
            li.innerHTML = `
        <span class="task-text">${task}</span>
  ...