<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<style>

body { padding-top: 90px; }

.bg-p {
    background-color: #FF745C;
}

.fa {
    color: #FF745C;
}

.bg-s {
    background-color: #e2e2e2;
}

.bg-i {
    background-color: #f8f9fa!important;
}

.text-receive {
    color: #676463;
}

.text-small {
  font-size: 1rem;
}

.text-muted {
    color: #e2e2e2;
}

.btn-outline-primary {
  color: #676463;
  border-color: #676463;
}
.messages-box,
.chat-box {
  overflow-y: scroll;
  margin: 10px 16px;
  height: 100%;
  padding-bottom: 40px !important;
  overflow: auto;
}

.rounded-lg {
  border-radius: 0.5rem;
}

input::placeholder {
  font-size: 1rem;
  color: #999;
}

</style>
<body>
      <!-- Just an image -->
  <nav class="navbar navbar-light bg-light fixed-top shadow-sm">
    <a class="navbar-brand" href="#">
    <img src="https://i.ibb.co/M5YdtLy/logo.png" width="150px" border="0"/>
    <a href="#"><button type="button" class="btn btn-outline-primary btn-sm">Reset Chat</button></a>
    </a>
  </nav>
    
  <div class="px-0 py-0 chat-box bg-white">

    <!-- Sender Message-->
    <div class="media my-3 w-75">
      <div class="media-body">
        <div class="bg-s rounded py-3 px-3">
          <p class="text-small mb-0 text-receive">Lorem ipsum dolor sit amet.</p>
        </div>
          <p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
      </div>
    </div>

    <!-- Reciever Message-->
    <div class="media my-3 w-75 ml-auto">
      <div class="media-body">
        <div class="bg-p rounded py-3 px-3 mb-0">
          <p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet.</p>
        </div>
        <p class="small mb-0 text-muted">You<span> - </span>Time</p>
      </div>
    </div>

    <!-- Sender Message-->
    <div class="media my-3 w-75">
      <div class="media-body">
        <div class="bg-s rounded py-3 px-3">
          <p class="text-small mb-0 text-receive">Lorem ipsum, dolor sit amet consectetur adipisicing.</p>
        </div>
          <p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
      </div>
    </div>

    <!-- Reciever Message-->
    <div class="media my-3 w-75 ml-auto">
      <div class="media-body">
        <div class="bg-p rounded py-3 px-3 mb-0">
          <p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum aspernatur quae itaque!</p>
        </div>
        <p class="small mb-0 text-muted">You<span> - </span>Time</p>
      </div>
    </div>

    <!-- Sender Message-->
    <div class="media my-3 w-75">
      <div class="media-body">
        <div class="bg-s rounded py-3 px-3">
          <p class="text-small mb-0 text-receive">Lorem ipsum dolor sit.</p>
        </div>
          <p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
      </div>
    </div>

    <!-- Reciever Message-->
    <div class="media my-3 w-75 ml-auto">
      <div class="media-body">
        <div class="bg-p rounded py-3 px-3 mb-0">
          <p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet.</p>
        </div>
        <p class="small mb-0 text-muted">You<span> - </span>Time</p>
      </div>
    </div>

    <!-- Sender Message-->
    <div class="media my-3 w-75">
      <div class="media-body">
        <div class="bg-s rounded py-3 px-3">
          <p class="text-small mb-0 text-receive">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem commodi ea ipsa culpa quia dicta!</p>
        </div>
          <p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
      </div>
    </div>

    <!-- Reciever Message-->
    <div class="media my-3 w-75 ml-auto">
      <div class="media-body">
        <div class="bg-p rounded py-3 px-3 mb-0">
          <p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet.</p>
        </div>
        <p class="small mb-0 text-muted">You<span> - </span>Time</p>
      </div>
    </div>

    <!-- Sender Message-->
    <div class="media my-3 w-75">
      <div class="media-body">
        <div class="bg-s rounded py-3 px-3">
          <p class="text-small mb-0 text-receive">Lorem ipsum dolor sit amet.</p>
        </div>
          <p class="small mb-0 text-muted">Bot<span> - </span>Time</p>
      </div>
    </div>

    <!-- Reciever Message-->
    <div class="media my-3 w-75 ml-auto">
      <div class="media-body">
        <div class="bg-p rounded py-3 px-3 mb-0">
          <p class="text-small mb-0 text-receive text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto laudantium, adipisci quibusdam rem quidem aspernatur perferendis suscipit voluptas excepturi tempora et totam? Dolorum vel numquam at tempora, et dicta laudantium!</p>
        </div>
        <p class="small mb-0 text-muted">You<span> - </span>Time</p>
      </div>
    </div>
    

    
        
  </div>

  <!-- Typing area -->
  <form action="#" class="bg-light fixed-bottom shadow-lg">
    <div class="input-group">
      <input type="text" placeholder="Type a message" aria-describedby="button-addon2" class="form-control bg-i rounded-0 border-0 py-4 bg-s">
      <div class="input-group-append">
        <button id="button-addon2" type="submit" class="btn btn-link bg-i"> <i class="fa fa-paper-plane"></i></button>
      </div>
    </div>
  </form>



</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.