JSFiddle - React, Tailwind, and code Playground

by Eric Blanchette

HTML

<div class="modal">
	<div class="header">
		Don't get locked out!
	</div>	
	<div class="message">
		If you ever have trouble signing in, your up-to-date recovery email and mobile number will help you get to your account.
	</div>
	<div class="section-name">
	
		Recovery email
	</div>
	<div>
		<div class="contact-value">
			[email protected] 
		</div>
		<div class="contact-action">	
			Edit
		</div>
	</div>
	<div class="add">
		+ Add another email
	</div>
	<div class="section-name">
		Recovery number
	</div>
	<div>
		<div class="contact-value">
			555-555-5555
		</div>
		<div class="contact-action">	
		
			Edit
		</div>
	</div>
	<div class="add">
		<a>+ Add another phone</a>		
	</div>
	<div class="button">
	
		Looks good
	</div>
</div>

CSS

body {
	font-family:Arial;	
}

.modal {
	background-color:white;
	width:350px;	
	padding:20px;
	box-shadow: 3px 3px #eee;
	border-top: solid 4px blue;	
	margin: 100px auto;		
}

.header {
	font-size:150%;
	text-align: center;
	padding:10px;	
}

.message {
	text-align:center;
	padding:10px;
}

.section-name {
	padding-top: 20px;
	padding-bottom:10px;
	font-weight:bold;
}

.contact-action {
	float:right;	
	color:blue;
	
}

.contact-value {
	float:left;
}

.add {
	padding-top:10px;	
	padding-bottom:10px;	
	color:blue;
	clear:both;
}

.button{
	background-color:#7777FF;
	width:200px;
	text-align:center;
  padding:10px;	
	margin:30px auto;
}