JSFiddle - React, Tailwind, and code Playground

by Amens

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/3.0.4/choices.min.js"></script>
<div class="messages">
  <div class="messages-wrapper">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod lacinia at quis risus sed vulputate odio ut. Quis lectus nulla at volutpat diam. Tortor vitae purus faucibus ornare
        suspendisse sed nisi lacus sed. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Sit amet purus gravida quis blandit turpis. Commodo elit at imperdiet dui accumsan sit. Massa tincidunt dui ut ornare lectus sit. Ut morbi tincidunt augue
        interdum velit euismod. Amet mauris commodo quis imperdiet massa tincidunt. Turpis nunc eget lorem dolor sed viverra. Sit amet volutpat consequat mauris nunc congue nisi vitae. Diam quam nulla porttitor massa id neque aliquam. Dignissim suspendisse
        in est ante in nibh mauris. Tellus orci ac auctor augue mauris augue neque. Velit aliquet sagittis id consectetur. Pulvinar proin gravida hendrerit lectus. Nisi lacus sed viverra tellus in hac habitasse. Maecenas sed enim ut sem viverra aliquet.</p>
      <p>Senectus et netus et malesuada fames ac. Venenatis tellus in metus vulputate eu scelerisque felis. Arcu felis bibendum ut tristique. Ut morbi tincidunt augue interdum velit. Donec ultrices tincidunt arcu non sodales. Ornare suspendisse sed nisi
        lacus sed viverra tellus in hac. Vestibulum morbi blandit cursus risus at. Tristique senectus et netus et malesuada. Et ultrices neque ornare aenean euismod elementum. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Ultrices gravida
        dictum fusce ut. Odio morbi quis commodo odio aenean sed adipiscing. Lacus laoreet non curabitur gravida arcu ac tortor dignissim convallis. In nulla posuere sollicitudin aliquam. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse.
        Velit scelerisque in dictum non...

SCSS

$option-box-height: 50px;





body {
  margin: 0;
  box-sizing: border-box;
}

input[type="radio"]:checked {
  display: none;
}

.options-box {
  max-height: $option-box-height;
  min-width: 50px;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  &.open {
    overflow: visible;
    max-height: none;
    .option {
      display: none;
    }
    input[type="radio"] {
      display: none;
    }
    .option.choosed {
      display: block;
    }
  }
  .options {
    
    position: absolute;
    
  }
  
  img {
    width: $option-box-height - 20;
    border-radius: 60px;
    border: 2px solid #EEE;
  }
}

.testCheckbox {
  color: red;
}

.checked {
  color: red;
}

body {
  overflow: hidden;
}

p+p {
  margin: 80px 0;
}

.messages-wrapper {
  contain: layout;
  overflow-y: scroll;
  flex: 1;
  display: flex;
}

.messages-wrapper p {
  display: block
}

.messages {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  width: 100vw;
}

.message-form {
  background: #333;
  display: flex;
  flex-shrink: 0;
  /* grid-template-columns: 200px auto;
  grid-template-rows: 100px auto; */
  /* overflow:hidden; */
}

input[type="textarea"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  font-weight: 400;
  max-height: 144px;
  min-height: 20px;
  padding: 10px 38px 10px 10px;
  resize: none;
  width: 100%;
}
/*===============================
=            Choices            =
===============================*/

$choices-selector: 'choices' !default;
$choices-font-size-lg: 16px !default;
$choices-font-size-md: 14px !default;
$choices-font-size-sm: 12px !default;
$choices-guttering: 24px !default;
$choices-border-radius: 2.5px !default;
$choices-border-radius-item: 20px !default;
$choices-bg-color: #f9f9f9 !default;
$choices-bg-color-disabled: #EAEAEA !default;
$choices-bg-color-dropdown: #FFFFFF !default;
$choices-text-color: #333333...

JavaScript

const selectChar = document.querySelector(".test");

const example = new Choices(selectChar, {
	choices: [{
  value: 'Value 1',
  label: 'Label 1',
  id: 1,
  customProperties: {
    img: 'https://www.placehold.it/60x60'
  }
},
{
  value: 'Value 2',
  label: 'Label 2',
  id: 2,
  customProperties: {
    img: 'https://www.placehold.it/60x60'
  }
}],
  callbackOnCreateTemplates: function (template) {
    var classNames = this.config.classNames;
    return {
      item: (data) => {
        return template(`
          <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}><img src="${data.customProperties.img}"/>
          </div>
        `);
      },
      choice: (data) => {
        return template(`
          <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
            <img src="${data.customProperties.img}"/>${data.label}
          </div>
        `);
      },
    };
  }
});


/* const radios = document.getElementsByName("3");
const radiosLgth = Object.keys(radios).length;
const optionsBox = document.querySelector(".options-box");

for (let i = 0; i < radiosLgth; i += 1) {
  radios[i].addEventListener("click", function() {
    if (this.checked === true) {
      optionsBox.classList.toggle("open");
      this.parentNode.parentNode.classList.toggle("choosed");
    }
  })
}
 */