HTML/CSS - Drag & Drop Online Editor and JavaScript Compiler

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>Drag & Drop</title>
    <!--===========Css File ===========-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <h2>Drag & Drop</h2>
    <div class="container">
        <div class="item">&lt;/body&gt;</div>
        <div class="item">This is a text</div>
        <div class="item">&lt;p&gt;</div>
        <div class="item">&lt;body&gt;</div>
        <div class="item">&lt;/p&gt;</div>
    </div>
    <a href="https://youtu.be/MjVrW5xsxyA">Youtube</a>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js" integrity="sha512-Eezs+g9Lq4TCCq0wae01s9PuNWzHYoCMkE97e2qdkYthpI0pzC3UGB03lgEHn2XM85hDOUF6qgqqszs+iXU4UA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        let element = document.querySelector('.container');

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}
h2{
    color:  #29e;
    font-size: 3rem;
}
.item{
    width: 200px;
    box-shadow: 0 0 .3rem .3rem  rgba(0,0,0,0.06);
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 6px;
    cursor: pointer;

BROWSER

Console