JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="waxom-relizations">
	<div class="wrap">
		<div class="waxom-realiz-adapt">
			<div class="realiz-top">
				<h3 class="waxom-headline">Waxom is Realization of your Ideas.</h3>
				<p class="waxom-paragraph">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium.
				</p>
			</div>
			<div class="img-browser">
				<div class="left-browser">
				</div>
				<div class="center-browser">
				</div>
				<div class="right-browser">
				</div>
			</div>
		</div>
	</div>
</div>

CSS

.waxom-relizations{
    height: 72.8vh;
    background-color: #fbfaf8;
}
 
.waxom-realiz-adapt{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
 
.realiz-top{
    margin-top: 60px;
    text-align: center;
}
 
.waxom-headline{
    font-family: 'Raleway';
    font-weight: 600;
    font-style: normal;
    color: #555555;
    font-size: 30px;
    margin-bottom: 18px;
}
 
.waxom-paragraph{
    font-size: 16px;
    color: #8c8c8c;
    font-family: 'Montserrat';
    font-weight: 300;
    font-style: normal;
    width: 810px;
    line-height: 1.9;
}
 
.img-browser{
    margin-top: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    overflow: hidden;
}
 
.left-browser{
    border: 1px solid;
    width: 770px;
    height: 400px;
    overflow: hidden;
}
 
.right-browser{
    border: 1px solid;
    width: 770px;
    height: 400px;
    overflow: hidden;
}
 
.center-browser{
    border: 1px solid;
    width: 770px;
    height: 482px;
    position: absolute;
    left: 25%;
    top: 50%;
    -webkit-transform: translate(-1%, -50%);
    transform: translate(-1%, -50%);
    background-image: url(img/browser-center.jpg);
}