JSFiddle - React, Tailwind, and code Playground

by vinishanto

HTML

<link rel="stylesheet" href="https://www.lendingstream.co.uk/static/chat_ui/bundle.css">
<div id="dobby-chat" class="box-chat shown">
   <div class="chat_window">
      <div class="chat_icon">
         <svg width="24px" height="24px" viewBox="0 0 38 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Fill 1</title>
            <desc>Created with Sketch.</desc>
            <g id="---" transform="translate(-587.000000, -1072.000000)" fill="#FFFFFF">
               <path d="M606,1072 C595.564176,1072 587,1080.56418 587,1091 C587,1094.4442 587.928625,1097.7971 589.689539,1100.73045 L587,1110 L596.269551,1107.31046 C599.202898,1109.07137 602.555805,1110 606,1110 C616.435824,1110 625,1101.43582 625,1091 C625,1080.56418 616.435824,1072 606,1072" id="Fill-1" transform="translate(606.000000, 1091.000000) scale(1, -1) rotate(270.000000) translate(-606.000000, -1091.000000) "></path>
            </g>
         </svg>
      </div>
      <p>Live chat</p>
   </div>
   <div class="box-head"><span>How can we help?<sup>Beta</sup></span><i class="icon-close material-icons" id="close_chat">arrow_forward</i></div>
   <div class="box-conversation">
      <p data-ui-name="Assistant 07/05/2020, 19:27:37" class="msg-box-response">Welcome to Drafty. Our agents are incredibly busy. I’m Drafty’s chat helper and I’ll do what I can to help you today. In order to keep your personal data safe, please do not share your full debit card number, your bank account number, date of birth or any details of your medical conditions.</p>
      <ul class="suggestion-card">
         <li>Select your query from the list below</li>
         <li data-value=" Can’t make payment using my card"> Can’t make payment using my card</li>
         <li data-value=" Increase my credit line/Give me extra credit"> Increase my credit line/Give me extra credit</li>
         <li data-value=" Update my details"> Update my details</li>
         <li data-value=" I am...

SCSS

@import url(//fonts.googleapis.com/icon?family=Material+Icons);

//write the Styles below