<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit eveniet modi animi ipsam cum debitis provident, eligendi rerum laboriosam iusto eius in voluptates veniam est eum nihil culpa? Omnis doloremque, quasi fuga exercitationem vitae labore enim nam, ipsa iure, nisi quaerat similique. Excepturi molestias assumenda rerum officiis vel voluptates laudantium. Enim rem tempore pariatur suscipit doloremque saepe non amet unde. Non sint dicta, voluptatem laboriosam ad voluptate aut, magnam itaque delectus quisquam provident? Qui laboriosam magnam autem esse ab officiis necessitatibus libero odit incidunt, quo atque ratione ipsa fugiat officia quas itaque aspernatur pariatur et? Fuga nihil sit saepe doloribus veritatis quaerat expedita culpa quidem ad accusamus porro est vitae vero non quisquam aut sequi odio, illum eum. Itaque facilis dolorum enim architecto esse iste fugiat numquam ipsum libero nisi odit soluta ipsam dolor inventore vitae magnam, cupiditate, hic veniam debitis tempore unde ullam quisquam totam consequuntur! Mollitia nisi nobis tempore doloribus expedita eligendi laboriosam fugit saepe. Libero blanditiis saepe rerum culpa optio totam, deleniti iusto laborum esse maxime officia nam cupiditate, quisquam dolores autem perferendis ipsum. Quas quia magnam eligendi nihil voluptatum velit officia debitis assumenda minima illum amet tempore neque eaque dolore, exercitationem quam molestias nobis. Atque corrupti est ex rerum itaque modi. Aliquam, ducimus! Quia adipisci qui quidem, nulla, consectetur eveniet explicabo quaerat pariatur reiciendis quo doloremque aspernatur sit voluptate odio reprehenderit ut eligendi. Culpa, consequatur repellat magnam cumque commodi illo ad porro! Odio laudantium temporibus a iure vero aut alias distinctio ab quisquam aspernatur ipsum eaque nemo voluptatibus architecto culpa, doloribus dolores. Cupiditate voluptates, assumenda modi at distinctio quam fuga eveniet in natus non repudiandae eum error officiis, provident reprehenderit fugiat aperiam deleniti ad dolorum? Ipsa voluptates distinctio veniam optio. Praesentium neque numquam velit, vitae corrupti ad repellendus facilis sint odit illo sequi. Minima eos dolorem pariatur nobis repellat, sunt sapiente harum non sit inventore! Nemo corrupti esse debitis, rem blanditiis atque facilis qui culpa iure veniam asperiores at quia, reprehenderit mollitia saepe optio eveniet provident sequi quos voluptatibus aperiam soluta. Ratione fugiat odio quos magnam, commodi rerum provident quaerat exercitationem quae odit. Vitae debitis architecto nisi nobis consequatur non sunt sapiente iste voluptate dolores sit possimus reiciendis, suscipit cumque nulla? Ad suscipit eum illum iure nulla, quis dignissimos ipsa dolorum aliquid. Cupiditate possimus repellat laboriosam sunt sint, soluta nobis consequatur placeat quibusdam delectus consectetur aspernatur perspiciatis suscipit? At, debitis delectus blanditiis ea ratione cumque perferendis dolorem, tempora et amet nemo, corporis eligendi nulla laborum. Hic temporibus incidunt a eligendi in, libero obcaecati quis laborum consequuntur perferendis mollitia, inventore cumque, nesciunt deserunt. Dolor animi ex ducimus eum expedita, est repellendus, enim error dicta necessitatibus fuga magnam itaque deleniti at obcaecati unde eos porro dolores veritatis voluptates ut! Alias consectetur earum tempora possimus, libero ex reprehenderit quasi numquam ab qui. Nulla similique eius dolorem tempora aliquam eos ad repellendus facere nobis ut voluptate est repellat vitae, error quod ipsum esse libero, qui ratione sit. At, tempora. Sequi, ipsum animi perferendis a magni voluptatibus, iusto inventore ducimus quidem dicta fuga laudantium explicabo suscipit veniam nisi maiores, quos sit! Assumenda, incidunt ipsum. Ullam reprehenderit, minus fuga a non unde sunt reiciendis aliquid delectus libero pariatur quod dolore hic ratione magnam consectetur tempore similique est aspernatur mollitia asperiores illo. Rem iste, voluptates ducimus vel accusamus corrupti nemo dolorum voluptatibus sint laborum fuga provident suscipit odit tempora vitae, incidunt velit, aspernatur repellendus saepe sed. Soluta, magni. Quo porro quia ab omnis optio reiciendis dolorum cum ipsum dignissimos. Nobis, beatae aliquid nam dolorum nemo quo voluptates dignissimos numquam consequuntur perferendis exercitationem non cupiditate reiciendis minima facilis enim ullam, in explicabo hic unde quasi. Dignissimos ipsa aspernatur iure consectetur voluptatibus corrupti reprehenderit nemo mollitia nostrum fugiat aut voluptate, blanditiis vero, maxime omnis? Inventore distinctio quisquam ab. Quo quam facere reiciendis quasi similique saepe dolorem repellat eius nulla cupiditate ad ab veniam ut explicabo voluptate praesentium mollitia debitis qui impedit illum nesciunt, animi, est eveniet. Aspernatur soluta unde nihil non corporis ab voluptates inventore illo, molestias repellat facere fuga sunt doloremque reiciendis excepturi dolores ea obcaecati cum id dicta placeat labore iste. Quia officia quod possimus ipsa? Autem quam cupiditate fuga. Dignissimos, eaque sapiente fugit deserunt magnam blanditiis debitis deleniti impedit sit explicabo vitae soluta tempore, autem ab porro similique exercitationem reprehenderit perferendis molestiae ducimus fuga nesciunt architecto totam! Blanditiis iure quia est, quasi beatae dolore voluptatum illo libero? Tempore ipsam rem, maxime nam minima quo, quidem blanditiis quibusdam tempora accusamus debitis fugit. Nulla a ab architecto aperiam doloremque? Magni voluptate impedit fuga alias iusto, culpa ducimus cumque aperiam et qui ut, quos aspernatur in laboriosam nemo esse libero tempora vitae repudiandae sit illo soluta illum odit? Aspernatur, qui, molestiae minima unde optio omnis amet doloribus placeat illo asperiores eius quidem tempore aut ex quo aliquid culpa. Eligendi numquam necessitatibus reiciendis maiores maxime adipisci! Alias iusto repellendus architecto maiores incidunt. Quaerat doloremque inventore accusamus eveniet recusandae, modi delectus minima veritatis ut dolor totam dolorem deleniti quisquam earum, eligendi quam! Aut illum officiis rerum dolor, veniam cum, officia eum fuga fugit architecto possimus, temporibus consectetur quaerat a laborum error. Architecto vero voluptates id rerum quis, sunt ab, culpa, quibusdam excepturi ratione corrupti. Iusto iste debitis odio dolores ullam. Culpa laboriosam adipisci reiciendis numquam, hic consectetur, aliquam ipsa nisi obcaecati mollitia eos atque voluptatum eligendi! Corporis dicta voluptates dolor accusamus iusto assumenda officia culpa enim numquam similique ex maiores, vel veniam totam tempora fugiat voluptatibus est minus ipsum deleniti aliquid! Officia fugit pariatur impedit commodi sequi. Cum nobis quasi quod laudantium illo sed placeat, rerum esse alias fugit, ipsa eum earum odio id quaerat eaque doloremque. Optio laboriosam, aperiam aspernatur numquam odit quae. Perspiciatis eligendi dicta laborum molestias assumenda ab atque similique quis nulla repellendus, necessitatibus deserunt reprehenderit ipsa nihil a distinctio. Molestias illo eveniet deserunt magnam sint tempora expedita perferendis iure assumenda, quo aperiam, rem ducimus earum corporis consequatur saepe tempore vel ea fuga debitis provident hic ipsam laborum! Voluptates, accusamus facilis earum, reiciendis quis nihil optio incidunt odio omnis veniam esse alias ab quaerat!</p>
<div class="chatbox">
  <h2>Chatbox</h2>
  <ul>
    <li>Selam</li>
    <li>Selam abi</li>
    <li>Nasılsın?</li>
    <li>İyidir seni sormalı</li>
    <li>İyi abi ne olsun işte</li>
    <li>Lorem ipsum</li>
    <li>Dolar sasmemet</li>
    <li>Lorem ipsum</li>
    <li>Dolar sasmemet</li>
  </ul>
  <input type="text" placeholder='Mesaj yazın'>
</div>
:root {
  --text-color: rgb(107, 114, 128);
  --title-color: rgb(55, 65, 81);
  --border-color: rgb(182, 197, 227);
}

@import url('https://fonts.googleapis.com/css2?family=Viaoda+Libre&display=swap');

body{
  font-family: 'Lato', sans-serif;
  background-color: #fafafa;
  line-height: 1.5;
  font-size: 16px;
  color: var(--title-color);
  padding: 20px;
}

.chatbox {
  position: fixed;
  width: 250px;
  right: 20px;
  bottom: 0;
  background-color: lightblue;
  padding-bottom: 10px;
  border-radius: 10px 10px 0 0;
  display: flex;
  flex-direction: column;
}
h2 {
  color: white;
  border-radius: 10px 10px 0 0;
  background-color: #232b31;
  font-size: 22px;
  padding: 8px 10px;
}

ul {
  padding: 10px;
  height: 150px;
  overflow: auto;
}

ul li {
  border-bottom: 1px solid var(--border-color);
  padding-block: 8px;
}

ul li:nth-child(odd) {
  text-align: right;
}

input {
  border: 1px solid var(--text-color);
  border-radius: 3px;
  padding: 5px;
  margin: 25px 10px 0 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.