JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css link -->
    <link rel="stylesheet" href="style.css">
    <!-- fontawesome -->
    <script src="https://kit.fontawesome.com/525fd5b530.js" crossorigin="anonymous"></script>
</head>
<body>
    <div id="todos">
        <div class="heading">
            <h1>Add Todo List</h1>
        </div>
        <div class="todo-input-container">
            <input class="todo_input" type="text" placeholder="Add Task...">
            <i class="fas fa-plus add-item"></i>
            <i class="fas fa-trash-alt add-item deleteBtn" onclick="deleteAllElements()"></i>
            <div class="select">
        <select name="todos" class="filter-todo">
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="uncompleted">Uncompleted</option>
        </select>
      </div>
            
        </div> 
        <p id="pi" style="display:none; margin-top:-20px;">
            plas
            </p>
    </div>
    <script src="todo.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    background: rgb(193,62,62);
    background: linear-gradient(139deg, rgba(193,62,62,1) 0%, rgba(230,179,50,1) 100%);
    overflow-x: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100%;
}
/* select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background-image: none;
}

Custom Select
.select {
  margin: 1rem;
  position: relative;
  overflow: hidden;
}
select {
  color: #ff6f47;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  width: 12rem;
}
Arrow
.select::after {
  content: "\25BC";
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
  background: #ff6f47;
  cursor: pointer;
  pointer-events: none;
} */
#todos{
    color: white;
    padding: 20px;
    width: 600px;
    margin: 0 auto;
    height: auto;
}
#todos > .heading{
    margin-bottom: 30px;
    text-align: center;
}
#todos > .heading > h1{
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    font-size: 2.5rem;
}
#todos > .heading > h1::before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    width: 10%;
    height: 2px;
    background-color: white;
    transition: .5s;
}
#todos > .heading > h1:hover::before{
    width: 80%;
}
#todos > .todo-input-container{
    width: 100%;
    text-align: center;
    position: relative;
    margin-bottom: 50px;
}
#todos > .todo-input-container > .todo_input{
    width: 100%;
    height: 40px;
    padding: 0 0 0 10px;
    font-size: 1.2rem;
    outline: none;
    border: none;
}
#todos > .todo-input-container > .add-item{
  ...

JavaScript

/* Select all the necessary Elements  */
var input = document.querySelector('.todo_input');
var MainTodoContainer = document.getElementById('todos')
var addingButton = document.querySelector('.add-item');
var deleteAllBtn = document.querySelector('.deleteBtn');
var completedButton = document.querySelector('.completed');
var removeButton = document.querySelector('.trash');
const filterOption = document.querySelector(".filter-todo");
filterOption.addEventListener("click", filterTodo);
addingButton.addEventListener('click', function(e){
    /* stoping button behaviour */
    e.preventDefault();
    
    /* Create all the elements */
    if(input.value.trim()){
        /* UL Tag */
        var ulTag = document.createElement('ul');
        ulTag.classList.add('todo-list-container');
        /* Todo list div */
        var todoList = document.createElement('div');
        todoList.classList.add('todo-list');
        /* LI Tag */
        var liTag = document.createElement('li');
        liTag.innerText = input.value;
        liTag.classList.add('todo-item');
        /* Button Div */
        var buttonDiv = document.createElement('div');
        buttonDiv.classList.add('button');
        /* completed button element1 */
        var completeButton = document.createElement('button');
        completeButton.classList.add('completed');
        completeButton.innerHTML = '<i class="fas fa-check"></i>';
        /* Edit Button */
        var editBtn = document.createElement('button');
        editBtn.innerHTML = '<i class="far fa-edit"></i>';
        editBtn.classList.add('editBtn');
        editBtn.onclick = function(){
            editWorking(liTag);
        }
        /* trash button element2 */
        var trashButton = document.createElement('button');
        trashButton.classList.add('trash');
        trashButton.innerHTML = '<i class="fas fa-trash"></i>';
    
        /* Appending Elements into each other */
        ulTag.appendChild(todoList);
       ...