JSFiddle - React, Tailwind, and code Playground

by Ngoc Hieu

HTML

<div id="effect5" class="image">
        <img src="http://4.bp.blogspot.com/-Kp_TNL5Eu-Y/UtFlQHDrXWI/AAAAAAAAAD4/kmdmtHoUyMI/s1600/effect-5.jpg" />
        <div class="detail">
            <h1 class="title">Hiệu ứng 5</h1>
            <p>Chúng ta vẫn biết rằng, làm việc với một đoạn văn bản dễ đọc và rõ nghĩa dễ gây rối trí</p>
            <a href="#">Xem tiếp</a>
        </div>
    </div>

CSS

.image{
        width: 360px;
        float: left;
        margin: 10px;
        position: relative;
        overflow: hidden;
        height: 240px;
    }
    .image img{
        width: 100%;
    }
    h1.title{
        text-transform: uppercase;
        font-size: 25px;
        font-weight: bold;
        line-height: 25px;
        padding: 10px;
        position: relative;
    }   
    .detail{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
        text-align: center;
    }
    p{
        color: #fff;
        padding: 10px;
    }
    a{
        text-decoration: none;
        display: inline-block;
        padding: 10px 15px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border: 1px solid #111;
    }
    .mask{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
    }

#effect5 .detail{
        background: rgba(146,96,91,0.3);
        transform:translateX(-100%);// Đẩy phần detail sang trái ra khỏi #effect5
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        transition:all 0.4s ease-in-out 0s;
        -moz-transition:all 0.4s ease-in-out 0s;
        -webkit-transition:all 0.4s ease-in-out 0s;
    }
    #effect5 .title{
        background: rgba(255,255,255,0.5);
        box-shadow: 0 1px 3px #999;
        color:#111;
    }
    #effect5 p{
        color:#111;
        opacity: 0;
        transition:all 0.4s linear 0.5s;
        -webkit-transition:all 0.4s linear 0.5s;
        -moz-transition:all 0.4s linear 0.5s;
        font-weight: bold;
    }
    #effect5 img{
        transition:all 0.4s ease-in-out 0s;
        -moz-transition:all 0.4s ease-in-out 0s;
        -webkit-transition:all 0.4s ease-in-out 0s;
    }
    #effect5 a{
        background: #111;
        border-radius: 0;
        color:#fff;
    }
    #effect5:hover...