Code Here:

									
<div class="todo-widget scrollable" style="height:450px;">
    <ul class="list-task todo-list list-group mb-0 pl-0" data-role="tasklist">
        <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
            data-role="task">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck">
                <label class="custom-control-label todo-label w-100" for="customCheck">
                    <span class="todo-desc">Lorem Ipsum is simply dummy text of the printing
                        and typesetting industry.</span> <span
                        class="badge badge-pill badge-danger float-right">Today</span>
                </label>
            </div>
            <ul class="list-style-none pl-4">
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/1.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Steave"></li>
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/2.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Jessica"></li>
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/3.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Priyanka"></li>
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/4.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Selina"></li>
            </ul>
        </li>
        <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
            data-role="task">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="custom-control-label todo-label w-100" for="customCheck1">
                    <span class="todo-desc">Lorem Ipsum is simply dummy text of the
                        printing</span><span
                        class="badge badge-pill badge-primary float-right">1 week </span>
                </label>
            </div>
            <div class="pl-4 font-12 mt-1 d-inline-block text-muted"> 26 jun 2017</div>
        </li>
        <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
            data-role="task">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck2">
                <label class="custom-control-label todo-label w-100" for="customCheck2">
                    <span class="todo-desc">Give Purchase report to</span> <span
                        class="badge badge-pill badge-info float-right">Yesterday</span>
                </label>
            </div>
            <ul class="list-style-none pl-4">
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/3.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Priyanka"></li>
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/4.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Selina"></li>
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/3.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Priyanka"></li>
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/4.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Selina"></li>
            </ul>
        </li>
        <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
            data-role="task">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck3">
                <label class="custom-control-label todo-label w-100" for="customCheck3">
                    <span class="todo-desc">Lorem Ipsum is simply dummy text of the printing
                    </span> <span class="badge badge-pill badge-warning float-right">2
                        weeks</span>
                </label>
            </div>
            <div class="pl-4 font-12 mt-1 d-inline-block text-muted"> 26 jun 2017</div>
        </li>
        <li class="list-group-item todo-item  border-0 mb-0 py-3 pr-2 pl-0"
            data-role="task">
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck4">
                <label class="custom-control-label todo-label w-100" for="customCheck4">
                    <span class="todo-desc">Give Purchase report to</span> <span
                        class="badge badge-pill badge-info float-right">Yesterday</span>
                </label>
            </div>
            <ul class="list-style-none pl-4">
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/1.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Steave"></li>
                <li class="p-0 d-inline-block border-0 mr-1"><img class="rounded-circle"
                        width="30px" src="../assets/images/users/2.jpg" alt="user"
                        data-toggle="tooltip" data-placement="top" title=""
                        data-original-title="Jessica"></li>
            </ul>
        </li>
    </ul>
</div>
									
								

Social Widget

Code Here

									
<div class="card social-widget">
    <div class="card-body bg-info">
        <div class="d-md-flex align-items-center  text-white">
            <div>
                <h4 class=" mb-0">People you may know</h4>
            </div>
            <div class="ml-auto">
                <a href="javascript: void(0)"><i class="mdi mdi-menu text-white font-20"></i></a>
            </div>
        </div>
        <form class="mt-4 mb-3">
            <div class="input-group mb-3 ">
                <input type="text" class="form-control" placeholder="Search by Email" aria-label="">
                <div class="input-group-append">
                    <button class="btn btn-light py-0" type="button"><i
                            data-feather="search"></i></button>
                </div>
            </div>
        </form>
    </div>
    <div class="card-body">
        <div class="row mt-2">
            <div class="col-4 text-center">
                <img src="../assets/images/users/1.png" alt="" class="img-fluid user-img">
                <h6 class="font-12 mt-1">Hanna Gover</h6>
                <button class="btn btn-light btn-sm">Connect</button>
            </div>
            <div class="col-4 text-center">
                <img src="../assets/images/users/2.png" alt="" class="img-fluid user-img">
                <h6 class="font-12 mt-1">Kendra Silly</h6>
                <button class="btn btn-light btn-sm">Connect</button>
            </div>
            <div class="col-4 text-center">
                <img src="../assets/images/users/3.png" alt="" class="img-fluid user-img">
                <h6 class="font-12 mt-1">Jack Sully</h6>
                <button class="btn btn-light btn-sm">Connect</button>
            </div>
        </div>
        <button class="btn btn-lg btn-block bg-twitter text-white mt-5 font-16">Invite friends from
            Twitter <i class="fab fa-twitter ml-2"></i></button>
        <button class="btn btn-lg btn-block bg-facebook text-white font-16">Invite friends from
            Facebook <i class="fab fa-facebook-f ml-2"></i></button>
    </div>
</div>
									
								

Profile Card

Code Here

									
<div class="card">
    <div class="card-body text-center">
        <div class="profile-pic mb-3 mt-3">
            <img src="../assets/images/users/5.jpg" width="150" class="rounded-circle" alt="user" />
            <h4 class="mt-3 mb-0">Daniel Kristeen</h4>
            <a href="mailto:danielkristeen@gmail.com">danielkristeen@gmail.com</a>
        </div>
        <div class="badge badge-pill badge-light font-16">Dashboard</div>
        <div class="badge badge-pill badge-light font-16">UI</div>
        <div class="badge badge-pill badge-light font-16">UX</div>
        <div class="badge badge-pill badge-info font-16" data-toggle="tooltip" data-placement="top"
            title="3 more">+3</div>
    </div>
    <div class="p-4 border-top mt-3">
        <div class="row text-center">
            <div class="col-6 border-right">
                <a href="#" class="link d-flex align-items-center justify-content-center font-weight-medium"><i class="mdi mdi-message font-20 mr-1"></i>Message</a>
            </div>
            <div class="col-6">
                <a href="#" class="link d-flex align-items-center justify-content-center font-weight-medium"><i class="mdi mdi-developer-board font-20 mr-1"></i>Portfolio</a>
            </div>
        </div>
    </div>
</div>