JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">





<div class="phone-ratiolizer">
  <div class="phone-phone">

    <div class="phone-top">
      <div class="phone_antenna"></div>
      <div class="phone-sound_hole"></div>
      <div class="phone-flash"></div>
    </div>


    <div class="phone-screen">

      <div class="phone-screen_top_bar">
        <div class="phone-msg_owner" contenteditable spellcheck=false>FisioGO</div>
				<div class="phone_msg_owner_edit_icon phone-edit_icon fas fa-pen" on-click="focusMsgOwnerText"></div>
      </div>
			

      <div class="phone-screen_body">
			
        <div class="phone-msg_bubble">
				
					<div class="phone_msg_bubble_edit_icon phone-edit_icon fas fa-pen" on-click="focusBubbleText"></div>
				
          <div class="phone-msg_bubble_text" contenteditable spellcheck=false>
            LEMBRETE: consulta com MEMBRO amanha pelas HORA. Nao podendo comparecer, envie por favor mensagem para 913679488. Respeitosos cumprimentos.
          </div>
        </div>
				
      </div>



    </div>

    <div class="phone-bot">
      <div class="phone-button"></div>
    </div>
  </div>
</div>

CSS

.phone-ratiolizer {
  position: relative;
  width: 350px;
  max-width: 100%;
  font-family: helveticaneue;
  font-size: 14.5px;
  color: #3a3a3a;
   line-height: 1.3;
}

.phone-ratiolizer:after {
  content: "";
  display: block;
  padding-bottom: 180%;
}


.phone-sound_hole:after,
.phone-flash:after,
.phone-button:after,
.phone-msg_bubble:after {
  content: "";
  display: block;
}

.phone-sound_hole,
.phone-flash,
.phone-button {
  background-color: #fff;
}

.phone-screen_top_bar,
.phone-msg_bubble {
  background-color: #f2f89c;
}

.phone-phone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #565656;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 5px;
}

.phone-top {
  display: flex;
  justify-content: space-between;
  padding: 2% 2% 3%;
  align-items: flex-start;
}



.phone-sound_hole {
  border-radius: 50px;
  width: 25%;
}

.phone-sound_hole:after {
	padding-bottom: 7%;
}

.phone-flash {
  border-radius: 50px;
  width: 2%;
}

.phone-flash:after {
	padding-bottom: 100%;
}

.phone-bot {
  padding: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-button {
	width: 15%;
  border-radius: 50px;
}

.phone-button:after {
	padding-bottom: 35%;
}

.phone-screen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  background-color: #fff;
  border: 6px solid #565656;
  border-top: 0;
  border-bottom: 0;
}

.phone-screen_top_bar {
	position: relative;
  padding: 2px;
}

.phone-msg_owner,
.phone-msg_bubble_text {
  outline: none;
	border: 1px solid transparent;
	transition: .1s;
}

.phone-msg_bubble_text:focus,
.phone-msg_owner:focus {
    border-color: rgba(0,0,0,.2);
    background: #ffffff96;
}

.phone-msg_owner {
	text-align: center;
  padding: 2px 24px;
}

.phone-screen_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: right;
  flex: 1;
  align-items: flex-end;
 ...