JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<div id="accordion">
  <h3>Docs</h3>
  <div>
    <div class="kanban">
    <div id="backlog" class="story">
        <h1>Backlog</h1>
        <ul class="tasks">
            <li><div class="task">Tarea 1</div></li>
            <li><div class="task">Tarea 2</div></li>
            <li><div class="task">Tarea 3</div></li>
        </ul>
    </div>
    <div id="todo" class="story">
        <h1>To-do</h1>
        <ul class="tasks">
            <li class="task">Tarea 6</li>
        </ul>
    </div>
    
    <div id="doing" class="story">
        <h1>Doing</h1>
        <ul class="tasks">
            <li class="task">Tarea 4</li>
        </ul>
    </div>
    
    <div id="done" class="story">
        <h1>Done</h1>
        <ul class="tasks">
            <li class="task">Tarea 3</li>
        </ul>
    </div>
</div>
  </div>
  <h3>Restrictions</h3>
  <div>
    <div class="kanban">
    <div id="backlog" class="story">
        <h1>Backlog</h1>
        <ul class="tasks">
            <li><div class="task">Tarea 1</div></li>
            <li><div class="task">Tarea 2</div></li>
            <li><div class="task">Tarea 3</div></li>
        </ul>
    </div>
    <div id="todo" class="story">
        <h1>To-do</h1>
        <ul class="tasks">
            <li class="task">Tarea 6</li>
        </ul>
    </div>
    
    <div id="doing" class="story">
        <h1>Doing</h1>
        <ul class="tasks">
            <li class="task">Tarea 4</li>
        </ul>
    </div>
    
    <div id="done" class="story">
        <h1>Done</h1>
        <ul class="tasks">
            <li class="task">Tarea 3</li>
        </ul>
    </div>
</div>
  </div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    font-family: "Helvetica";
}

.kanban {
    width: 100%;
}

.kanban h1 {
    font-size: 1em;
}

.story {
    background: #DDD;
    border: 1px solid #EEE;
    height: 400px;
    float: left;
    padding: 5px;
}

.story ul {
  min-height: 100px;
}

.tasks {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.task {
    padding: 10px;
    font-size: 0.7em;
    background: #FFF;
    border: 1px solid #EEE;
}

#backlog {
    width: 20%;
}

#todo {
    width: 20%;
}

#doing {
    width: 20%;
}

#done {
    width: 20%;
}

JavaScript

$( ".tasks" ).disableSelection();
$(".tasks" ).sortable({
    connectWith: ".tasks"
});
$('#accordion').accordion();