JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div class = "fons">
			<div class = "capcalera">
                <div class = "navigation">
					{ NAVEGACION }
				</div> <!--navigation-->
				<div class = "name">
                    { NOMBRE }
				</div> <!--name-->	

				<div class = "login">
					{ LOGIN }
				</div> <!--login-->
                <div style="clear:both;"></div>
			</div> <!---capcalera-->
			
			<div class = "contingut">
				{ CONTENIDO }
			</div> <!--contingut-->
			
			<div class = "footer">
                { FOOTER }
			</div> <!--footer-->
		</div> <!---fons-->
</body>

CSS

.capcalera{
    margin-bottom: 50px;
    position: relative;
    border-bottom: 1px solid #CCCCCC;
}
.name{
	width: 780px;
	margin-top: 10px;
	margin-left: 10px;
}
.navigation {
    float: right;
}
.login{
    background-color: #FFFFFF;
	height: 170px;
	width: 370px;
	position: absolute;
    top: 38px;
    left: 150px;
	border: 10px solid #FE2E2E;
    border-radius: 40px 0 40px 40px;
}

.contingut {
    background-color: #CCCCCC;
	min-height: 200px;
    margin-bottom: 10px;
}
.footer{
    background-color: #666666;
    color: #FFFFFF;
    text-align: center;
}