JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div>
    <h2>Forrst</h2>
    <p>Integer luctus luctus justo at eleifend. Aenean tincidunt leo quis sapien consequat ut ornare elit lobortis. Sed aliquam sagittis lacus mattis dapibus. Vestibulum eget mauris sed est posuere congue at a urna. Maecenas id nisi orci, nec pharetra massa. Praesent nunc arcu, vulputate at mattis ac, placerat sit amet mauris. Donec id mi ut lorem commodo lobortis. Nulla adipiscing semper neque, vel tincidunt justo iaculis nec. Nullam iaculis, enim a consequat aliquet, lorem neque dignissim tortor, eu gravida nibh risus sit amet nisl. Nullam elit libero, vulputate vel ultricies ut, aliquam at ante.</p>
</div>
<div class="left">
    <h2>Lorem Ipsum</h2>
   <p>Integer luctus luctus justo at eleifend. Aenean tincidunt leo quis sapien consequat ut ornare elit lobortis. Sed aliquam sagittis lacus mattis dapibus. Vestibulum eget mauris sed est posuere congue at a urna. Maecenas id nisi orci, nec pharetra massa. Praesent nunc arcu, vulputate at mattis ac, placerat sit amet mauris. Donec id mi ut lorem commodo lobortis. Nulla adipiscing semper neque, vel tincidunt justo iaculis nec. Nullam iaculis, enim a consequat aliquet, lorem neque dignissim tortor, eu gravida nibh risus sit amet nisl. Nullam elit libero, vulputate vel ultricies ut, aliquam at ante.</p>
   <a href="#">Read more...</a>
</div>
<div class="right">
    <h2>adipis</h2>
   <p>Integer luctus luctus justo at eleifend. Aenean tincidunt leo quis sapien consequat ut ornare elit lobortis. Sed aliquam sagittis lacus mattis dapibus. Vestibulum eget mauris sed est posuere congue at a urna. Maecenas id nisi</p>
   <a href="#">Read more...</a>
</div>
<div class="right">
    <h2>adipis</h2>
   <p>Integer luctus luctus justo at eleifend. Aenean tincidunt leo quis sapien consequat ut ornare elit lobortis. Sed aliquam sagittis lacus mattis dapibus. Vestibulum eget mauris sed est posuere congue at a urna. Maecenas id nisi</p>
   <a href="#">Read more...</a>
</div>

CSS

body {
    font-family: "Lucida Grande", Helvetica, Arial;
}

div {
    clear: both;
    background: #F7F7F7;
    border: 1px solid rgba(0,0,0,1);
    -moz-transition: 0.6s all ease-out;
    -webkit-transition: 0.6s all ease-out;
    margin: 0 -2px -2px 0;
}

div:hover {
    position: relative;
    z-index: 2;
    margin: -10px 8px 8px -10px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.55), 
                     1px 1px 0 rgba(0,0,0,.6),
                     2px 2px 0 rgba(0,0,0,.6),
                     3px 3px 0 rgba(0,0,0,.6),
                     4px 4px 0 rgba(0,0,0,.6),
                     5px 5px 0 rgba(0,0,0,.6),
                     6px 6px 0 rgba(0,0,0,.6),
                     7px 7px 0 rgba(0,0,0,.6),
                     8px 8px 0 rgba(0,0,0,.6),
                     9px 9px 0 rgba(0,0,0,.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.55),
                     1px 1px 0 rgba(0,0,0,.6),
                     2px 2px 0 rgba(0,0,0,.6),
                     3px 3px 0 rgba(0,0,0,.6),
                     4px 4px 0 rgba(0,0,0,.6),
                     5px 5px 0 rgba(0,0,0,.6),
                     6px 6px 0 rgba(0,0,0,.6),
                     7px 7px 0 rgba(0,0,0,.6),
                     8px 8px 0 rgba(0,0,0,.6),
                     9px 9px 0 rgba(0,0,0,.6);
     background: orange;
    
        -moz-transition: .2s all ease-out;
    -webkit-transition: .2s all ease-out;
}

div > * {
    display: block;
    margin: 15px;
}

div.left, div.right {
    width: 50%;
    float: left;
    clear: none;
}
div.right {
    float: right;
}

h2 {
    font-family: Georgia;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 4em;
}