JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

<div class="receipt">
    <p class="location"></p>
    <input type="text" id="checkoutField">
        
    <div class="checkoutButton">
        <a href="#/checkout">
            <p>some button</p>
        </a>         
    </div>
        
 </div>
 </div>

CSS

.container {
    max-width: 460px;
    
}

.receipt {
	background-color: #ffffff;
	box-shadow: 0 4px 14px -2px rgba(0,0,0,0.26);
	padding-bottom: 24px;
}
.receipt .location {
	margin-top: 24px;
	margin-bottom: 24px;
	font-size: 14px;
	color: #868686;
	text-align: center;	
}

.receipt .checkoutButton {
	height: 50px;
	background-color: #35aba2;
	border-radius: 4px;
	margin-left: 20px;
	margin-right: 20px;
	cursor: pointer;
	margin-top: -6px;
}
.receipt .checkoutButton p {
	color: #fff;
	line-height: 50px;
	text-align: center;
}

.receipt #checkoutField {
	width:calc(100% - 40px);
    border: 0;
	height: 40px;
	background-color: #35aba2;
	border-radius: 4px;
	margin-top: -6px;
	margin-left: 20px;
}