<div class="bg-red-900 text-white max-w-md rounded overflow-hidden shadow-lg">
	<h3 class="p-4 bg-red-600 text-red-900 font-bold text-2xl m-0 tracking-tight md:px-6">Join our mailing list</h3>
	<div class="p-4 md:px-6 md:pb-6">
		<p>Be the first to hear about our new offerings</p>
		<button class="py-3 px-8 mt-4 font-bold rounded-xl bg-red-600 md:mt-6 border-2 border-red-600 hover:border-white focus:border-white hover:bg-transparent focus:bg-transparent" type="button">Sign up</button>
	</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

body {
	font-family: "Open Sans", sans-serif;
	padding: 1rem;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.