JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<div class="div1">
    <div class="wrap"></div>
</div>
<div class="div2">
    <div class="wrap"></div>
</div>
<div class="div3">
    <div class="wrap"></div>
</div>
<div class="main">
    <div class="wrap">
        <h2>header1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur rerum explicabo rem laborum asperiores ad delectus sed et quasi provident esse nemo veritatis est eligendi placeat velit consequatur blanditiis architecto!</p>
        <h2>header2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem consectetur nesciunt nemo explicabo qui eius repellat facere tenetur necessitatibus laudantium sed deleniti quae obcaecati omnis suscipit corporis ipsum. Architecto nesciunt.</p>
    </div>
</div>
<div class="div4">
    <div class="wrap"></div>
</div>
<div class="div5">
    <div class="wrap"></div>
</div>

CSS

.div1 {
    height: 50px;
    background: blue;
}
.div2 {
    background: yellow;    
    height: 50px;
}
.div3,
.div5{
    height: 50px;
    background: blue;
}
.div4 {
    background: yellow;    
    height: 50px;
}
.wrap {
    width: 300px;
    border: 1px solid black;
    margin: 0 auto;
    height: 100%;
}