JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800,900|Shadows+Into+Light&amp;display=swap" rel="stylesheet">

<div class="phone">
	<div class="phone_frame">
		<div class="phone_i">
			<div class="top_bar">
				O Meu Dentista
			</div>

			<div class="body">

				<div class="bubble_block">
					<div class="bubble">
						Marcação Amanhã!
					</div>
					<div class="bubble_footer">
						<div class="bubble_avatar"></div>
						<div class="bubble_footer_info"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

:root {
  --main-color: #5e2bcc;
  --phone-width: 150px;
  --phone-height-ratio: 1.56;
}


.phone {
	width: var(--phone-width);
	height: calc(var(--phone-width) * var(--phone-height-ratio));
	font-size: 13.2px;
	font-family: "fira sans";
	letter-spacing: -.05px;
	font-weight: 500;
}

.phone_frame,
.phone_i {
	height: 100%;
}

.phone_frame {
	border: 7px solid var(--main-color);
	border-width: 8px 4px;
	border-radius: 6px;
}

.phone_i {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	overflow: hidden;
}


.top_bar,
.bubble {
	color: var(--main-color);
	background-color: #09f;
	color: #fff;
}

.top_bar {
	padding: 3px;
	text-align: center;

}

.body {
	flex: 1;
	display: flex;
	flex-direction: column;
	Xjustify-content: center;
	xalign-items: flex-end;
	padding: 22px 8px;
}

.bubble_block {
}

.bubble {
	position: relative;
	padding: 10px 6px;
	border-radius: 2px;

	
}

.bubble:before,
.bubble:after {
	content: "";
	position: absolute;
	top: 100%;
	border: 5px solid transparent;
	left: 6px;
	border-top-color: #09f;
}





.bubble_footer {
	margin-top: 8px;
	display: flex;
	align-items: center;
}

.bubble_avatar {
	height: 6px;
	width: 6px;
	border-radius: 30px;
	
	margin-left: 8px;
	margin-right: 4px;
	
	background-color: #ddd;
}

.bubble_footer_info {
	width: 20%;	
	height: 3px;
	border-radius: 10px;
	background-color: #ddd;
}