JSFiddle - React, Tailwind, and code Playground

by Guddu Kumar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sender Message</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css" />
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container-fluid">
    <div class="row content">
        <div class="col-md-3 col-sm-3  sidenav">

            <div class="profile-usermenu">
                <div class="date-piker">
                    <div id="dateRangePicker">
                    </div>
                </div> <br>
                <ul class="nav">
                    <li class="active"><a href="#"><i class="glyphicon glyphicon-inbox"></i>Inbox </a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-send" data-folder="SENT"></i>Send </a></li>
                    <li><a href="#" target="_blank"><i class="glyphicon glyphicon-folder-open" data-folder="DRAFT"></i>Draft </a></li>
                    <li class="deleterow"><a href="#"><i class="glyphicon glyphicon-trash"></i>Delete </a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-book"></i>Archived </a></li>
                    <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i>Schduled </a></li>
                </ul>
            </div>

        </div>

        <div class="col-md-9 col-sm-9">
            <div class=""><br><br>

                <div>
                    <button type="button" class="btn btn-primary"><i...

CSS

.row.content {height: 1500px}
    .sidenav {
      background-color: #f1f1f1;
      height: 100%;
    }
    .profile-usermenu {
        margin-top: 6px;
    margin-right: 50px;
    margin-left: 19px;
    background: #f1f1f1;
    height: 100%;
    }
    .date-piker{
        background: white;
    }

.profile-usermenu ul li {
    border-bottom: 3px solid #ffffff;
}

.profile-usermenu ul li:last-child {

}

.profile-usermenu ul li a {
  color: #93a3b5;
  font-size: 14px;
  font-weight: 400;
}

.profile-usermenu ul li a i {
  margin-right: 8px;
  font-size: 14px;
}

.profile-usermenu ul li a:hover {
  background-color: #fafcfd;
  color: #5b9bd1;
}

.profile-usermenu ul li.active {

}

.profile-usermenu ul li.active a {
  color: #5b9bd1;
  background-color: #f6f9fb;
  border-left: 2px solid #5b9bd1;
  margin-left: -2px;
}
.btn{
    border-radius: 0px;
}


    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height: auto;}
    }

JavaScript

$(document).ready(function() {
        $('#dateRangePicker').datepicker({
            format: 'd M yyyy',
            autoclose : true
        });
        $(function(){
            /*============Modal append==============*/
            /* $('#add-new').on('click',function(){
             $('input.form-control').val('');
             $('#CreateMsg').modal('show',{backdrop:'static', keyboard:false});

             });*/
            /*============Add Details==============*/


            function validateEmail(email) {
                var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            }

            function guid() {
                function s4() {
                    return Math.floor((1 + Math.random()) * 0x10000)
                        .toString(4)
                        .substring(1);
                }
                return s4()

            }

            $('#addBtn').on('click',function(){
               var messId = guid() ;

                var msgtypeval = $('#msgtype').val();

                if(msgtypeval== "" || msgtypeval == null){
                    alert('please select message type');
                    return ;
                }
                /*To check for valid email*/
                var email = $('#email').val();

                if(!validateEmail(email)){
                    alert('Not a valid Email.')
                    return;
                }

                var messSubjet = $('#Submsg').val()

                if(messSubjet== "" || messSubjet == null) {
                    alert('please select message subject');
                    return;

                }


                 var messbody = $('#Submsg').val()

                if(messbody== "" || messbody == null) {
                    alert('please write a comment');
                    return;

                }

       ...