JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div class="all">
    <div class="trash"></div>

    <div class="buttons">
      <div class="back">
        <div class="goleft"></div>

        <div class="container">
          <div class="textne">
            <b>WHY HELLO THERE! TAKE A LOOK AT SOME JOKERS<br />
            ovo</b>
          </div><a href="http://sta.sh/03dyebq3g7o"></a>

          <div class="imagene"><img src=
          "http://placehold.it/300x300" /></div><a href="http://placehold.it/300x300"></a>

          <div class="imagene"><img src=
          "http://placehold.it/300x300" /></div><a href="http://placehold.it/300x300"></a>

          <div class="imagene"><img src=
          "http://placehold.it/300x300" /></div><a href="http://placehold.it/300x300"></a>

          <div class="imagene"><img src=
          "http://placehold.it/300x300" /></div><a href="http://placehold.it/300x300"></a>

          <div class="imagene"><img src=
          "http://placehold.it/300x300" /></div><a href="http://placehold.it/300x300"></a>

          <div class="imagene"><img src=
          "http://placehold.it/300x300" /></div>
        </div>
      </div>
    </div>
  </div><a href="[LINK%20URL]"></a>

  <div class="linku">
    <p>[LINK NAME]</p>
  </div>

CSS

*{background:none; border:none; margin:0;} 
a.external:after {display:none!important;}
span.user-symbol {display:none!important;}
a {font-weight:normal!important;}
.gr-top{display:none;}
.gr-top h2 img{display:none;}
.gr-top h2{display:none;}
.gr-top span{display:none;}
.tri{display:none;}
.gr1{display:none;}
.gr2{display:none;}
.gr3{display:none;}
.commentslink, .prevlink{display:none;}
.hsep{display:none;}
.bottom {display:none;}
.list {display:none;}


.gr-box{
cursor:default;
z-index:99!important;
line-height:1.2em;
font-family:Lucida Console;
font-size:10px;
}

.gr-body, .text{
position:relative;
width:550px;
overflow:hidden;
margin:0px auto;
text-align:center;
}

.back{
width:500px;
height:300px;
background:transparent;
overflow:hidden;
margin-left:0px;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;

}

.container{
width: 1700px;
height:300px;
margin-left:0px;
text-align:left;
transition:all 5s linear 360s;}

.container:hover{
margin-left:-1015px;
transition:all 5s linear;
}

.goleft {
position:absolute;
background:#000;
opacity:0;
width:200px;
height:300px;
z-index:9999;
cursor:url(http://orig09.deviantart.net/aa48/f/2015/327/f/2/arrow_by_codingtrash-d9hpzk9.png), auto; }

.goleft:hover + .container{
margin-left:0px;
transition:all 4s linear; }

.container u{
position:relative;
display:inline-block;
text-decoration:none;
width:100px;
height:150px;
overflow:hidden;
padding:50px 30px;
text-align:center; }

.imagene{
position:relative;
display:inline-block;
background:#777; 
margin-top:8px;
margin-left:8px;
height:280px;
border:1px solid #333;
transition:all .4s;
}

.imagene img{
opacity:0.8;
height:280px;
transition:all .4s;
}

.imagene img:hover{
opacity:1;
}

.imagene:hover {
border:1px solid #fff; }

.textne{
position:relative;
display:inline-block;
background:#777;
margin-top:8px;
width:200px;
margin-left:8px;
height:280px;
border:1px solid #333;
transition:all .4s;
}

.textne...