JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="bgFull bgLgrey">	
<div class="container">
<div class="main">

<div class="section">

<div class="frame">
<img src="http://hloe.co.uk/photo.jpg">
</div>

<div class="textbox">
<h2>Welcome to the world of Woodhacker van conversions!</h2><p>Born, built and based in West Wales. Woodhacker campervans are Beautiful, unique and quirky tiny homes on wheels.</p><p>
I specialise in the smaller affordable offgrid campervan and my official layout design was based on my own Toyota Hiace.</p><p>
My style is alternative with a rustic feel and funky elements with an attention to detail tailored to the individual.</p><p>
 Each campervan I build is unique in its styling, inspired by wood cabins, boats, gypsy caravans, shepherds huts and cosy old world style interiors found dotted around the Welsh landscape.</p>
</div>

</div>

</div>

</div>

</div>

CSS

body {background-color:#feffff;font-family:Arial;margin-top:50px;}

.bgFull {}	
.container {max-width:900px; margin:auto;}
.main {margin:0 10px;}

.textbox p {line-height:22px;margin-top:3px;}
.textbox h2 {margin-top:0;color:#3D9970;}

.section {display:flex;-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;}

.frame {padding:10px;background-color:#ffffff;width:280px;height:280px;margin:0 30px 0 0;

-webkit-box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.18);
-moz-box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.18);
box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.18);

-ms-transform: rotate(-2deg); /* IE 9 */
  transform: rotate(-2deg);
  
  transition: all 0.5s;
}

.frame:hover {-ms-transform: rotate(0deg); /* IE 9 */
  transform: rotate(0deg);
  
    transition: all 0.5s;
    
    }

.frame img {display:block;}


@media only screen and (max-width: 768px) {
  .section {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .frame {margin:20px auto;}
}