JSFiddle - React, Tailwind, and code Playground

by DeaDrash

HTML

<div id="wrapper">
    <div class="a">
        <h3>Блок №1</h3>
        <p>
            Contrary to popular  belief, Lorem Ipsum is not simply random text. It has roots in a piece  
        </p>
    </div>
     <div class="b">
        <h3>Блок №2</h3>
         <p>
            Contrary  to popular  belief, Lorem Ipsum is not simply random text. It has roots  in a piece
        </p>
    </div>
     <div class="c">
        <h3>Блок №3</h3>
         <p>
            Contrary  to popular  belief, Lorem Ipsum is not simply random text. It has roots  in a piece 
        </p>
    </div>
</div>

CSS

#wrapper{
    width:300px;
    background-color:#cc6;
    margin: 5px auto;
}
.a{
    width:100px;
    background-color:#adf;
    float:left;
    position:relative;
    left:100px;
}
.b{
    width:100px;
    background-color:#6cc;
    float:left;
    position:relative;
    left:-100px;
}
.c{
    width:100px;
    background-color:#fb7;    
    float:left;
}
p{
   
    background-color: #447788;
    color: #FFFFFF;
    margin: 0 10px 10px;
    padding: 7px;
}
h3{
    margin:10px 0px 0 11px;
    padding:2px 0px 0px 2px;
    color:#000;
}