JSFiddle - React, Tailwind, and code Playground

HTML

<body>
   
    <div class='hello'>
<div class="befeature">
    <div class="bebox" id="bebox1">

    <div class="beupbox"><h1><a href="#" target="_blank"><span style="color: #fafafa;">Recitation of Qur'an</span></a></h1></div>

    <div class="bedownbox"><p>The beautiful recitation from Syaikh Mishary Alafasy, Syaikh Saad Al-Ghamidi, Syaikh Hani Ar-Rifa'ie, 
Syaikh Mahr Al-Mu'aqly, Syaikh Sudays, 
and more Qari' arround the world.</p></div>

    </div>
    <div class="bebox" id="bebox2">

    <div class="beupbox"><h1><a href="#" target="_blank"><span style="color: #fafafa;">Nasyid Updates</span></a></h1></div>

    <div class="bedownbox"><p>Enjoy the Islamic nasheed experiences from the popular Islamic Singer like Mishary Alafasy, Mishary Alaradah, Ahmed Bukhatir, Maher Zain, Sami Yusuf, Humood al-Khuder, Raef, Mesut Kurtis, Hamza Namira, Irfan Makki, Zain Bikha, Yusuf Islam, Hijjaz...</p></div>

    </div>
    <div class="bebox" id="bebox3">

    <div class="beupbox"><h1><a href="#" target="_blank"><span style="color: #fafafa;">Art - Photography</span></a></h1></div>

    <div class="bedownbox"><p>All about inspiring Islamic designs, beautiful photography and amazing islamic architecture arround the World. You can get tips, author information and biography, and 
more.</p></div>

    </div>
    <div class="bebox" id="bebox4">

    <div class="beupbox"><h1><a href="#" target="_blank"><span style="color: #fafafa;">Stories and Motivation</span></a></h1></div>

    <div class="bedownbox"><p>Upgrade your Faith with the newly stories and motivation! Discover the most inspiring stories and motivation wich can make you move on.</p></div></div></div>
    </div>
    <div class="clear"></div>
    
    
    <a class="gotoar1web" href="http://www.ar1web.com/2015/05/box-styling.html" >Get This Widget</a>
</body>

CSS

body {background:#F4F4F4;}
a.gotoar1web {
  margin: 20px 44%%;
  padding: 10px;
  background: #52A133;
  color: #fff;
  border-radius: 3px;position: fixed;
}
.hello {
  width: 982px;
  margin: 0 auto;
  padding: 5px;
  background: #FFF;
  border: 1px solid #E2E2E2;
}

  .befeature
    {
    height: 250px;
    overflow: hidden;
    width: 995px;
    padding: 0px 0px 0px 0px;
    }
    .bebox:hover
    {
    margin-top: -180px;
    }
    .bebox
    {
    float: left;
    height: 485px;
    margin: 0px 9px 0px 9px;
    margin-left: 0%;
    moz-transition: all .3s ease-in-out;
    ms-transition: all .3s ease-in-out;
    o-transition: all .3s ease-in-out;
    overflow: hidden;
    padding: 193px 0 0 0;
    transition: all .3s ease-in-out;
    webkit-transition: all .3s ease-in-out;
    width: 24%;
    }
    .beupbox
    {
    height: 50px;
    margin: 0;
    overflow: hidden;
    padding: 5px 10px 0px 10px;
    width: 100%;
    }
    .beupbox h1
    {
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    padding: 0px 0px 0px 0px;
    width: 95%;
    text-shadow: 0 -1px 0 rgba(137, 137, 137, 0.25);
    }
.beupbox a{text-decoration: none;}
    .bedownbox
    {
    height: 400px;
    margin: 0;
    padding: 5px 10px 0px 9px;
    width: 94%;
    }
    .bedownbox p
    {
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 400;
    }
    #bebox1
    {
    background: #52A133 url('http://1.bp.blogspot.com/-97MbYzx6I-o/UxfSv6gbHCI/AAAAAAAADZQ/RUCPdAcH3bk/s1600/qu.jpg') no-repeat;
    background-size: 100% 180px;
    }
    #bebox2
    {
    background: #52A133 url('http://3.bp.blogspot.com/-6aUr7Kja7Mc/UuVCAjLHpFI/AAAAAAAADAk/j0GDXiMyvMo/s1600/737040_462996207093301_1612633988_o.jpg') no-repeat;

    background-size: 100% 180px;
    }
    #bebox3
    {
    background: #52A133...