JSFiddle - React, Tailwind, and code Playground

by horprogs

HTML

<main class="clearfix">
    <div class="block1"> <a href="#">  <img src="img/block1.png" height="323" width="304" alt=""></a>
    </div>
    <div class="content">
        <p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident illo, fugit consectetur facilis ab, nulla similique. Mollitia facere cupiditate assumenda, iure, hic nesciunt non provident tempore similique, accusamus quod magni</p>
    </div>
    <div class="block2"> <a href="#">  <img src="img/block2.png" height="323" width="304" alt=""></a>

    </div>
</main>

CSS

main {
	max-width: 1200px;
	margin: 100px auto 0;
	position: relative;
}
 .block2 {
     width: 305px;
     position: absolute;
     text-align: right;
     right:0;
 }

 .block1 {
     
     width: 304px;
     position: absolute;
     left: 0;
 }

.content {
     width:400px;
     text-align: center;
     left: 0;
     right: 0;
     margin:0 auto;
     font-size: 16px;
     top:0;
     position: absolute;
 }

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}

@media screen and (max-width:1024px){
 .block1 {
display: none;
}
.block2 {
    display: block;
    margin: 100px auto 0;
    left: 0;
    position: relative;

}
    
}