JSFiddle - React, Tailwind, and code Playground

by edelvyncarl_seraspe

HTML

<div class="speech-wrapper"> 
<span class="name">Benni</span></br/>
 <div class="avatar">
            <img src="http://dummyimage.com/40x40/000/fff.jpg" />
        </div>
  <div class="bubble">       
    <div class="txt">            
      <p class="message">Hey, check out this Pure CSS speech bubble...</p>
    </div>
    <div class="bubble-arrow"></div>    
  </div>
  <!--  Speech Bubble alternative --> 
  <div class="bubble alt">
    <div class="txt">
      <p class="message">Nice... this will work great for my new project. fsadfd df df dfdfg sdf df dfg df df 41d8514fg85dfg14s5df1g5 015sd14fdf</p>      
    </div>
    <div class="bubble-arrow alt"></div>
  </div>
</div>

CSS

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color:#ccc
}

.speech-wrapper {
  padding: 30px 40px;
}
.speech-wrapper .bubble {  
  height: auto;  
  background: #f5f5f5;
  border-radius: 10px;
  
  position: relative;
  margin: 0 0 25px 10px;
  display:inline-block;
}

.avatar {
            height: 35px;
            width: 35px;
            border:5px solid red;            
            display:inline-table;
 }

.speech-wrapper .bubble.alt {
  margin: 0 0 0 60px;
  display:inline-block;
}
.speech-wrapper .bubble .txt {
  padding: 8px 55px 8px 14px;
}
.speech-wrapper .name {
  font-weight: 600;
  font-size: 12px;
  margin: 0 0 4px;
  color: #3498db; 
  bottom: auto;
  left: 15px;
}
.speech-wrapper .bubble .txt .name span {
  font-weight: normal;
  color: #b3b3b3;
}
.speech-wrapper .bubble .txt .name.alt {
  color: #2ecc71;
}
.speech-wrapper .bubble .txt .message {
  font-size: 12px;
  margin: 0;
  color: #2b2b2b;
}
.speech-wrapper .bubble .txt .timestamp {
  font-size: 11px;
  position: absolute;
  bottom: 8px;
  right: 10px;
  text-transform: uppercase;
  color: #999;
}
.speech-wrapper .bubble .bubble-arrow {
  position: absolute;
  width: 0;
  bottom: 42px;
  left: -16px;
  height: 0;
}
.speech-wrapper .bubble .bubble-arrow.alt {
  right: -2px;
  bottom: 40px;
  left: auto;
}
.speech-wrapper .bubble .bubble-arrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 9px solid #f5f5f5;
  border-radius: 0 20px 0;
  width: 15px;
  height: 30px;
  transform: rotate(145deg);
}
.speech-wrapper .bubble .bubble-arrow.alt:after {
  transform: rotate(45deg) scaleY(-1);
}