JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <header>
      <h1>To do list </h1>
    </header>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="app-container">

            <div class="input">
              <div class="date">
                <span class="day">Monady</span>
                <span class="current-date">17</span>
                <div class="month-year">
                  <span class="month">September</span>
                  <span class="year">2017</span>
                </div>

              </div>
              <input class="task-input" type="text" name="task" />
              <button class="add-button">Add</button>
            </div>
            <div class="list">
              <ul>
                <li>
                  <p class="task">
                    samplee
                  </p>
                  <span class="remove"><i class="fa fa-trash" aria-hidden="true"></i></span>'
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

SCSS

$bg-input: rgba(169, 197, 249, 1);
$bg-add: rgba(255, 179, 87, 1);

body {
  header {
    width:100%;
    height:200px;
    h1 {
      font-size:10rem;
      text-align: center;
    }
  }
  .app-container {
    width:500px;
    height:500px;
    margin:0 auto;
    position: relative;
    .input {
      width:400px;
      height:150px;
      background-color: $bg-input;
      margin:0 auto;
      padding:0 10px;
      position: relative;
      z-index: 1;
      .date {
        display:flex;
        flex-direction: row;
        align-items: center;
        .day {
          flex:6;
          font-size:1.5rem;
                  align-items: center;
        }
        .current-date {
          flex:1;
          font-size: 2rem;
          text-align: center;
        }
        .month-year {
          flex:1;
          display: flex;
          flex-direction: column;
          align-items: center;
        }

      }

      .task-input {
        width: 100%;
        border:none;
        background-color: $bg-input;
        border-bottom:3px solid gray;
        height: 50px;
        font-size: 3rem;
      }
      .add-button {
        width: 100%;
        margin: 15px auto;
        display: block;
        border:0;
        background-color: $bg-add;
      }
    }
    .list {
      width:100%;
      min-height: 400px;
      background-color: lightgray;
      position: absolute;
      top:100px;
      ul {
        padding:50px 10px;
        li {
          list-style: none;
          width:100%;
          height:60px;
          display: flex;
          flex-direction: row;
          align-items: center;
          position: relative;
          margin: 10px 0;
          &:after {
            content:'';
            position: absolute;
            width:70%;
            bottom:0;
            background-color: white;
            height:1px;
            left:15%;

          }
          .task {
            flex:10;
            margin: 0;
            padding-left:20px;
          }
  ...

JavaScript

$(document).ready(function() {
  var input = $('.task-input');
  var span = '<span class="remove"><i class="fa fa-trash" aria-hidden="true"></i></span>'

  $('.add-button').click(function() {
    if(input.val() == '') {
      var margin = 10;
      for(var i = 0; i < 10 ; i++) {
        $(this).animate( {
            'margin-left': '+=' + (margin = -margin) + 'px'
         }, 50);
      }



    }
    else {
      $('ul').append('<li><p class="task">'+input.val()+'</p>'+ span +'</li>');
      input.val('');
    }

  })

  $('.list').find('li').mouseenter(function() {
    $(this).css({
      'background-color':'yellow'
    })
    $('.remove').css({
      'display':'block'
    })

    $('.remove').click(function() {
      $(this).parent().remove();
    })
  })

  $('.list').find('li').mouseleave(function() {
    $(this).css({
      'background-color':'lightgray'
    })

    $('.remove').css({
      'display':'none'
    })
  })



})