JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<header>
    Header
</header>
<div class="container">
    <div class="ui image resend-email">
        <img class="image" />
    </div>
    <div class="colour-wrapper">
        <h3>Email sent</h3>
    </div>
</div>
<footer></footer>

CSS

header {
	display: block;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	padding: 1rem;
}

footer {
	background-color: #024474;
	display: block;
	min-height: 5rem;
	padding: 1rem;
}

.container,
.colour-wrapper {
	display: block;
}

.container {
	background-color: #fff;
	padding-top: 5rem;
}

.colour-wrapper {
	background-color: #faf9f3;
	padding: 1rem;
}

.resend-email {
	margin-top: -1rem;
	transform: translateY(25%);
}

.ui.image > .image {
	backface-visibility: visible;
	border: 1px solid blue;
	border-radius: 100%;
	display: block;
	margin: 0 auto;
	height: 2rem;
	width: 2rem;
}

h3 {
	text-align: center;
}