JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<div class="container third">
<div class="msg_group">
<div class="message_wrapper sender">
<div class="date"><span class="date_light">10 déc. 2015 16H45</span></div>
<div class="space"></div>
<div class="contact">J</div>
<div class="content_wrapper">
<div class="content"></div>
<div class="images">
<img class="image" src="https://preview.ibb.co/b7DZ4x/IMG_20151210_WA0002.jpg">
</div>
<img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
</div>
<div class="space_bot"></div>
<div style="clear:both;"></div>
</div>
</div>
<div class="msg_group">
<div class="message_wrapper sender">
<div class="date"><span class="date_light">10 déc. 2015 16H46</span></div>
<div class="space"></div>
<div class="contact">J</div>
<div class="content_wrapper">
<div class="content">Lo entiendes?</div>
<div class="images">
</div>
<img class="corner" src="https://image.ibb.co/dzMtxH/left_corner_sender.png">
</div>
<div class="space_bot"></div>
<div style="clear:both;"></div>
</div>
<div class="message_wrapper receiver">
<div class="space"></div>
<div class="contact">60</div>
<div class="content_wrapper">
<div class="content">Si en la siguiente rotonda</div>
<div class="images">
</div>
<img class="corner" src="https://image.ibb.co/gOzwHH/left_corner.png">
</div>
<div class="space_bot"></div>
<div style="clear:both;"></div>
</div>
<div class="message_wrapper sender">
<div class="space"></div>
<div class="contact">J</div>
<div class="content_wrapper">
<div class="content">En amarillo está la Avda. Juan...
CSS
body {
margin: 0;
background: white;
width: 110mm;
height: 170mm;
height: 169.8mm;
}
div {
display: block;
}
.container {
position: relative;
}
.third {
width: 100%;
height: 100%;
background-size: 100% 100%;
display: block;
position: relative;
}
.third .date {
text-align: right;
color: #394759;
font-size: 14px;
font-family: 'Open_Sans_Regular';
font-style: italic;
padding-right: 3%;
padding-top: 2%;
padding-bottom: 2%;
page-break-after: avoid !important;
padding-right: 9%;
padding-top: 5%;
padding-bottom: 0;
}
.third .message_wrapper {
page-break-inside: avoid !important;
clear: both;
padding: 0 20px;
}
.third .space {
display: block;
clear: both;
width: 100%;
height: 5mm;
}
.third .space_bot {
display: block;
clear: both;
width: 100%;
height: 3mm;
}
.third .message_wrapper .contact {
font-family: 'Open_Sans_Regular';
padding: 0;
font-size: 13px;
text-transform: uppercase;
text-align: center;
line-height: 25px;
width: 25px;
height: 25px;
border-radius: 50%;
float: left;
margin-left: 6%;
color: #a7a9ac;
border: 4px solid #a7a9ac;
background: #ededed;
}
.third .message_wrapper.sender .contact {
float: right;
margin-left: 0;
margin-right: 6%;
color: white;
border: 3px solid #394759;
background: #394759;
}
.third .message_wrapper .images {
padding: 2%;
}
.third .message_wrapper .content_wrapper {
max-width: 50%;
font-size: 15px;
font-family: 'Open_Sans_Regular';
border-radius: 10px;
position: relative;
padding-bottom: 6%;
min-width: 3%;
margin-left: 2%;
float: left;
padding: 2% 2% 2% 4%;
color: white;
border: 4px solid #a7a9ac;
background-color: #a7a9ac;
}
/*Right bubbles - inner*/
.third .message_wrapper.sender...