JSFiddle - React, Tailwind, and code Playground

by Eldan Shkolnikov

HTML

<ul>

    <li>Finish Wireframe Design <button>Assign Task</button>

    <div class="assign_task">

        <div class="datepicker"> Due Date and user task assignment goes here


            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eligendi eos fuga in ipsum libero sit totam veritatis? Ab adipisci architecto debitis doloremque fuga id molestiae provident saepe unde vel.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi cumque et libero nostrum porro, quae sunt! Aspernatur deleniti fugit, magni

        </div>



    </div>
    </li>

</ul>


<ul>

    <li>Make sure that the contact page, and the landing page gets revised tomorrow <button>Assign Task</button>

        <div class="assign_task">

            <span class="datepicker"> Due Date and user task assignment goes here</span>

        </div>

    </li>

</ul>

CSS

body{
           margin-top : 300px
        }

        .assign_task,.datepicker{
            display: inline-block;
            width: 212px;
            position: relative;
            z-index: 10;
            background-color: white;


        }

        .assign_task{
            top :220px
        }

JavaScript

$(".assign_task").hide();

    $("button").click(function () {

        var task_assignment_div = $(this).next();

        task_assignment_div.toggle();

    });