<div class="chat99-container">
  <div class="chat99-sidebar hide">
     <button class="btn btn-primary chat99-mobil-show" onclick="Chat99SidebarToggle()" style="position:absolute; z-index:45; right:-23px; top:13px">
            <i class="fas fa-stream"></i>
          </button>
    <div class="chat99-fixed pt-2">
      <div class="d-flex bd-highlight">
        <div class="p-2 w-100 bd-highlight">
          <input type="text" id="chat99-search" placeholder="Kullanıcı Ara ..." />
        </div>
        <div class="p-2 flex-shrink-1 bd-highlight">
        </div>
      </div>
    </div>
    <div class="chat99-content">
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
        <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
        <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
        <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
          <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
          <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
          <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
         <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
          <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
          <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
    <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email 435" data-username="@item.UserName gd34534">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
       <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
      <div class="d-flex bd-highlight chat99-user">
        <div class="p-2 flex-shrink-1 bd-highlight">
          <img class="chat99-user-icon" src="#" />
        </div>
         <div class="p-2 w-100 bd-highlight">
          <span class="chat99-username" onclick="Chat99UserClick(this)" data-chatid="@item.Id" data-email="@item.Email" data-username="@item.UserName">User Firstname AAA</span>
          <span class="chat99-message new">Last message text areasf...</span>
        </div>
      </div>
    </div>
  </div>
  <div class="chat99-body full">
    <div class="chat99-body-container">
      <div class="chat99-fixed w-100 d-block">
        <div class="d-flex bd-highlight">
          <div class="p-0 w-100 bd-highlight">
            <div class="d-flex flex-row bd-highlight">
              <div class="bd-highlight ps-5 pe-3">
                <div class="chat99-fixed-center">
                  <img class="chat99-user-icon" src="#" />  
                </div>
              </div>
              <div class="bd-highlight">
                <div class="chat99-fixed-center">
                  <span id="chat99-select-username">User Firstname Lastname</span>  
                </div>
              </div>
            </div>
          </div>
          <div class="flex-shrink-1 bd-highlight">
            <div class="chat99-fixed-center">
            <button class="btn btn-danger chat99-btn">
              <i class="far fa-trash-alt"></i>
            </button>   
             </div>
           </div>
        </div>
      </div>
      <div class="chat99-content" id="chat99-messages">
        <div class="d-flex flex-row bd-highlight chat99-message">
          <div class="p-2 bd-highlight">
            <div class="chat99-msg">
              <span class="chat99-msg-text">DFH fghfgd h d</span>
              <span class="chat99-msg-date">12.11.2027 11:21</span>
            </div>
          </div>
        </div>
        <div class="d-flex flex-row-reverse bd-highlight chat99-message">
          <div class="p-2 bd-highlight">
            <div class="chat99-msg">
              <span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
              <span class="chat99-msg-date">12.11.2027 11:21</span>
            </div>
          </div>
        </div>
        <div class="d-flex flex-row bd-highlight chat99-message">
          <div class="p-2 bd-highlight">
            <div class="chat99-msg">
              <span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
              <span class="chat99-msg-date">12.11.2027 11:21</span>
            </div>
          </div>
        </div>
        <div class="d-flex flex-row-reverse bd-highlight chat99-message">
          <div class="p-2 bd-highlight">
            <div class="chat99-msg">
              <span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
              <span class="chat99-msg-date">12.11.2027 11:21</span>
            </div>
          </div>
        </div>
        <div class="d-flex flex-row bd-highlight chat99-message">
          <div class="p-2 bd-highlight">
            <div class="chat99-msg">
              <span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
              <span class="chat99-msg-date">12.11.2027 11:21</span>
            </div>
          </div>
        </div>
        <div class="d-flex flex-row-reverse bd-highlight chat99-message">
          <div class="p-2 bd-highlight">
            <div class="chat99-msg">
              <span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
              <span class="chat99-msg-date">12.11.2027 11:21</span>
            </div>
          </div>
        </div>
        <div class="d-flex flex-row bd-highlight chat99-message">
          <div class="p-2 bd-highlight">
            <div class="chat99-msg">
              <span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
              <span class="chat99-msg-date">12.11.2027 11:21</span>
            </div>
          </div>
        </div>
        <div class="d-flex flex-row-reverse bd-highlight chat99-message">
          <div class="p-2 bd-highlight">
            <div class="chat99-msg">
              <span class="chat99-msg-text">DFH fghfgd hdfgd hfdhdfg fdhdfgh df hfdhfgdh dfhfdghdf hfdhhdfhdfhdfh dfhdfhfdh d</span>
              <span class="chat99-msg-date">12.11.2027 11:21</span>
            </div>
          </div>
        </div>
      </div>
      <div class="chat99-fixed chat99-new-message d-block" style="bottom:0px; top:initial;">
        <div class="d-flex bd-highlight">
          <div class="p-0 w-100 bd-highlight">
            <textarea id="chat99-new-msg-text" placeholder="new message"></textarea>
          </div>
          <div class="p-0 flex-shrink-1 bd-highlight">
            <div class="chat99-fixed-center">
            <button class="btn btn-primary chat99-btn" onclick="Chat99PostMessage()">
              <i class="far fa-paper-plane"></i>
            </button>              
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="clear:both"></div>
</div>
:root {
  --chat99-height: 100vh;
  --chat99-fixed: 65px;
  --chat99-side-width: 305px;
  --chat99-color-a1: #2c3e50;
  --chat99-color-a2: #f5f5f5;
  --chat99-color-a3: #e6eaea;
  --chat99-color-a4: blue;
}
.chat99-container {
  width: 100%;
  margin: 0px;
  padding: 0px;
  position: relative;
  min-height: var(--chat99-height);
  max-height: var(--chat99-height);
}
.chat99-sidebar {
  position: relative;
  float: left;
  background-color: var(--chat99-color-a1);
  max-height: 100%;
  padding-top: var(--chat99-fixed);
  width: var(--chat99-side-width);
}

.chat99-sidebar .chat99-fixed {
  background-color: var(--chat99-color-a1);
}
.chat99-body {
  width: 100%;
  position: relative;
  padding-top: var(--chat99-fixed);
  padding-bottom: var(--chat99-fixed);
  max-height: 100%;
  overflow: hidden;
  margin-left: var(--chat99-side-width);
  width: calc(100% - var(--chat99-side-width));
}
.chat99-sidebar.hide {
  width: 0px !important;
  max-width: 0px !important;
}
.chat99-body.full {
  width: 100% !important;
  margin-left: 0px !important;
}
.chat99-body-container {
  min-width: 320px;
}
#chat99-search {
  background-color: var(--chat99-color-a1);
  color: #fff;
  border: none;
  width: 100%;
  display: block;
  padding: 7px;
  margin: 0px;
}

#chat99-search:focus {
  background-color: #32465a;
  outline: none;
}
.chat99-fixed {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: var(--chat99-fixed);
  background-color: var(--chat99-color-a2);
}
.chat99-content {
  width: 100%;
  min-height: calc(var(--chat99-height) - var(--chat99-fixed));
  max-height: calc(var(--chat99-height) - var(--chat99-fixed));
  overflow: auto;
}
#chat99-messages {
  max-height: calc(
    var(--chat99-height) - var(--chat99-fixed) - var(--chat99-fixed)
  );
  min-height: calc(
    var(--chat99-height) - var(--chat99-fixed) - var(--chat99-fixed)
  );
  background-color: var(--chat99-color-a3);
  overflow-x:hidden;
}

.chat99-sidebar .chat99-content {
  padding-top: 20px;
  padding-bottom: 50px;
}
.chat99-hide {
  max-width: 0px;
  display: none;
}
.chat99-user-icon {
  width: 47px;
}
.chat99-user {
  border-bottom: 1px solid #32465a;
  color: #fff;
  cursor: pointer;
}
.chat99-user.active {
  background-color: #32465a;
}
.chat99-user:hover {
  background-color: #32465a;
}
.chat99-username,
.chat99-message {
  display: block;
  width: 100%;
}
.chat99-username {
  font-size: 1.1rem;
  font-weight: 500;
}
.chat99-message {
  font-size: 0.9rem;
  opacity: 0.9;
 
}
.chat99-message.new {
  color:yellow
}
.chat99-fixed-center{
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--chat99-fixed);
}
#chat99-select-username{
  font-size:1.2rem;
  max-height:var(--chat99-fixed);
  overflow:hidden;
}
.chat99-mobil-show {
  display: block !important;
}
.chat99-btn{
  border-radius:50%;
  width:40px; 
  height:40px;
  margin:10px;
}

@media only screen and (min-width: 680px) {
  .chat99-mobil-show {
    display: none !important;
  }
}
.chat99-msg {
  width: 85%;
  max-width: 370px;
  background-color: #fff;
  padding: 10px;
  border-radius: 0px 15px 15px 15px;
}
.flex-row-reverse .chat99-msg {
  margin-left: 15%;
  border-radius: 15px 15px 0px 15px;
  background-color: #868b8e;
  color: #fff;
}
.chat99-msg-text {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  min-width:250px;
}
.chat99-msg-date {
  display: block;
  width: 100%;
  font-size: 0.8rem;
  text-align: right;
}

.chat99-selectuser-name {
  line-height: 40px;
  font-size: large;
  margin-left: 10px;
  color: #000;
}

.chat99-new-message textarea {
  border: none;
  resize: none;
  padding: 10px;
  width: 100%;
  display: block;
  height: var(--chat99-fixed);
  background-color: transparent;
}
.chat99-new-message textarea:focus {
  background-color: transparent;
  outline: none !important;
  border: none !important;
  inline: none !important;
}
.chat99-new-message textarea::-webkit-scrollbar {
  display: none;
}

/******************************************************/
var chat57UserIcon =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAvCAYAAABzJ5OsAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS4xYyqcSwAABkhJREFUaEPNmWtsFFUUgO/dZyuIxsQYE374wwBhu0WESIjWxnS7La/dbWF5CyUGKGhsQAVmd8u0YMFAaK2GZxMsVCBN3bbWAPKu8igKhIe0/tFIrMoPQwKoUVra47nDFHbbszsz2231JF/a7k7nfnfmzr3nnmH9jaf98lCLr3iixRdcafYGarhH+sbkDf7CvYG71vwQcK90x+QNtHNvsAU/q7b4QkUWT/GEZ6fKj6mnGORYstNq8QVeMnuCVSh7h3mkLuYNgG7weO4J3MLObrP61oxjmbJFPfPAht0TdJl8gYvME7hPihlG6sQ7cy7FE3xVbSL5YfOtGYGNfE4LJAOpG89fZ/fKz6lNJiH8frM1L7gIx+5fdKPJBYfTbasvOEe0qxokGH7ZZvZKOw2P6f6C7WG7lUyWTaqJsXgqVx6WyDBJmR6C8cvLYJ68BZZv+BDmrN0CY5e9D/b8IHl8PMweaf/wGStSVSWdgVfcqLiQXlJWAT+31EJXawNAW+ND7uPfP52thQUl5WAz2An0CAsf1UwjcKyZvcGd1Ili8eSsYjjetBe6I4Qpulsb4WBDNQybWUyeJxZmX7ACzfgDwTghHk4jY3yoPwSnD9WQsrE40lgNdt8a8nwk6GP1STNVRTrEdGh0Vtm0fTspqEVo4wZg01aT56TA1fn31LxVw1XVvmF0nA9/vQT+vBIm5bS42XIAnsiYZagDJq9Ur6pGh1g5qX+Ix6J15aSYXqa/UQhsfJ6RDnTbPdJrqrIamKsoSz79DzGpqt5FSulle2UZMIcL2Dj9HcDRcSJq/hdJViK5SlO4mpTSS8OeigfyBjqAz2SnbUZopKrOmMgOqQO1qKvdTUrpZX/V5kfyAp1DCBevrYq4yMeVtJY4SIvSj7eSUnoJrZWi5QU67gD63mAL5RQcMsUTE81dXinaiKspLaZFx3f14JyEs01veT0d8AQ6bPnSKJQPriQP0IHIV66d2EfKafFVeBuYndm0vEBjCOFzWsjE1o36Ui8T3iqDv6/Wk4Kx+OPyZzBm8mxaOpI4d8DsC+xlYs9JfakXXPmgoLQcOq9HJ2Ox+OdaGPyLl9GyFDE6oHiLzXLvLxIhd+V6+KE5fo7z/bFPINO/gJaMBzGEFG8+5d27kR/2h6GTCqGgaAUcbdwFN682wO22JvjtSgMcrt8B8958G1LH5tJyeuh1BxRvzCKjBBIiLwT8nUrgexqBHz0F7MIl4K2tYGtrBXYd+fYi8MPHgVfsAu7HlMDppgW1iOiAKKswUVfpI6MXUZcJ7QDe3AKsrU03/MuTwAtWJNYJtQOKN+YK7aSYFvPXA288BqyVFtQE7wivCQObmE9LxgM7YJq2uh2vfLCFlIsDX7oJ+LkLtJRB+Mmvgbvn0ZJxML0w9TzO89IeSjAWvHAz8EtXSJFE4WfPA8ueS0rGwpzmqsYVNlRESVLwueuSdsV7w0+dxiHkI0Up7E73YiaKnrpyG/FwNh0nG04WfPcBYGlxUoaHZN2zOXNGMlGtxdXqFikcAS+tIhtMNnwpToWk8CO4w/Ujez7XrqTFolpLCffA55QCu3iZbCzpNJ/B2WQKKd2D2eH6SBEXoZSZcYdCiQt4+T66oQGCv7eelBbgVe94PD1rhKqOkSlbcL4/R4mzGWsH76qr8DO46L04mZQ3pbkOo3F0AUqpj+PuvLc8LxmcsR4FphZ88SpKvivFmZOhKkcHXv26KHnMe/ihZrqBAYZ/WoczT7S8xZFdq6r2DVHYF/Xxh1d9dgnwL45gLoJJ1WDTcBDYmEdZKE9z3RwyYdozqiodSmE/Yt7nGQVRvf8v4I6s+6npOfmqYpxQqsRSZY/8/6EDuNf9AM20q8RKyLIJ5/4DfTugZ/VLKt0Wp6vG8BsS8UYCH+Bw3w6QjQwIFqe7ZrTfr/PFQu8Q76REYX+QnwExxq1iqCT6TioiuCjsi/p4dAcGZgiJWSXVmeMV7T5oPgkhCvtKfVxdyAbgDnSZcR4fkqYxHfYnRH1clJlFtZZnLKQkDIG5SqdY8mOunEkPHIuizCyqtfzl+TfYaFcHJRabrHsirRXZoZpkJW+IGIrMhSm2NPcoe7p7GcrUmByu8yZH9q/486413S0evjv4ezt+1iK2bmIHpGwkevLxhIOxfwG//DaYWFF43gAAAABJRU5ErkJggg==";

$(document).ready(function () {
  $(".chat99-user-icon").attr("src", chat57UserIcon);
  Chat99Control();
  $(window).resize(function () {
    /*search elementi secilince mobilde ekran boyutu degistiginden slider kapaniyordu, focus olup olmadigi kontrol edilir*/
    if (!$("#chat99-search").is(":focus")) {
      Chat99Control();
    }
  });
  $("#chat99-search").keyup(function () {
    var findValue = $(this).val().trim().toUpperCase();
    if (findValue.length > 0) {
      $(".chat99-user").removeClass("d-flex").hide();
      $.each($(".chat99-user"), function (index_, element_) {
        var findName=$(element_).data('username').toUpperCase().indexOf(findValue);
        var findMail=$(element_).data('email').toUpperCase().indexOf(findValue);
        if (findName > -1 || findMail >-1) {
          $(element_).addClass("d-flex").show();
        }
      });
    } else {
      $(".chat99-user").addClass("d-flex").show();
    }
  });
});
function Chat99Control() {
  if ($(".chat99-container").eq(0).width() > 680) {
    Chat99SidebarToggle(true);
  } else {
    Chat99SidebarToggle(false);
  }
}
function Chat99SidebarToggle(isShow = null) {
  if (isShow != null) {
    if (isShow) {
      $(".chat99-sidebar").removeClass("hide");
      $(".chat99-body").removeClass("full");
    } else {
      $(".chat99-sidebar").addClass("hide");
      $(".chat99-body").addClass("full");
    }
  } else {
    $(".chat99-sidebar").toggleClass("hide");
    $(".chat99-body").toggleClass("full");
  }
}
function Chat99UserClick(this_user) {
  $(this_user).find(".chat99-message").first().removeClass("new");
  $("#chat99-select-username").text(
    $(this_user).find(".chat99-username").first().text()
  );
      $('.chat99-user.active').removeClass('active');
                $(this_user).addClass('active');
}
function Chat99PostMessage() {
  var msg = $("#chat99-new-msg-text").val();
  msg = msg.trim();
  if (msg.length > 0) {
    Chat99CreateMsg($("#chat99-new-msg-text").val(), "now");
    $("#chat99-new-msg-text").val("");
  }
  Chat99ScrollToBottom();
}
function Chat99CreateMsg(message_, date_, isMy_=true) {
  if (isMy_) {
    $("#chat99-messages").append(
      '<div class="d-flex flex-row-reverse bd-highlight chat57-message"><div class="p-2 bd-highlight"><div class="chat99-msg"><span class="chat99-msg-text">' +
        message_ +
        '</span><span class="chat99-msg-date">' +
        date_ +
        "</span></div></div></div>"
    );
  } else {
    $('#').append('<div class="d-flex flex-row bd-highlight mb-3"><div class="p-2 bd-highlight"><div class="chat99-msg"><span class="chat99-msg-text">'+message_+'</span><span class="chat99-msg-date">'+date_+'</span></div></div></div>');
  }
}

  function Chat99ScrollToBottom() {
            var div = $('#chat99-messages');
            div.animate({
                scrollTop: div[0].scrollHeight
            }, 700);
        }

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js