JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">   
    <div class="row">
        <div class="col-xs-12">
            <figure class="card-wrapper">
                <img src="http://www.gibsonlondon.com/images/static/homepage/promos/march2014/jackets_mini.jpg" class="lazy img-responsive push" alt="Shop all Jackets and Waistcoats">
                <figcaption class="card-wrapper__info text-center">
                    <div class="card-wrapper__arrow"></div>
                    <h3 class="card-wrapper__title text-uppercase">Regular Fit <strong>£129</strong></h3>                    
                    <span class="card-wrapper__subtext text-uppercase">Shop Now ></span>
                </figcaption>                                      
            </figure>    
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4">
            <a href="#">
                <figure class="card-wrapper">
                    <img src="http://www.gibsonlondon.com/images/static/homepage/promos/march2014/jackets_mini.jpg" class="lazy img-responsive" alt="Shop all Jackets and Waistcoats"/>
                    <figcaption class="card-wrapper__info text-center font-brand">
                        <div class="card-wrapper__arrow"></div>
                        <h3 class="card-wrapper__title">Regular Fit mix & match suit plus extra trouser and two shirts <strong>£129</strong></h3>                    
                        <span class="card-wrapper__subtext text-uppercase">Shop Now ></span>
                    </figcaption>                                      
                </figure> 
			</a>
        </div>
        <div class="col-xs-4">
	        <a href="#">
	            <figure class="card-wrapper">
	                <img src="http://www.gibsonlondon.com/images/static/homepage/promos/march2014/jackets_mini.jpg" class="lazy img-responsive" alt="Shop all Jackets and Waistcoats"/>
	                <figcaption class="card-wrapper__info text-center font-brand">
	                    <div...

SCSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.card-wrapper {
    color: #000;
    .inline-block;
    float: left;
    font-size:14px;
    margin: 0;
    position: relative;
    text-align:center;

}

.card-wrapper:hover {

        .card-wrapper__info {
            background: rgba(213, 17, 43, 0.3);
        }

        .card-wrapper__splitter {
            width: 120px;
            margin-left: -60px;
        }
    }

.card-wrapper:active {
        .card-wrapper__info {
            background: rgba(0,0,0,0.4);
        }
    }

.card-wrapper__info {
    background:#fff;
    position: relative;
    padding: 10px;
    float: left;
    width: 100%;
    z-index: 9;
    min-height: 115px;
}
.card-wrapper__info a {
    color:#000;
}
.card-wrapper__title {
    font-size: 12px;
    letter-spacing: 3px;
    line-height: 15px;
    margin:0;
    padding-bottom:10px;
}
.card-wrapper__title strong {
    color:#00a7bb;
}
.card-wrapper__splitter {
    background:@siteColour;
    height:3px;
    left:50%;
    margin-left:-30px;
    margin-bottom:9px;
    opacity:1;
    overflow:visible;
    position:relative;
    top:0;
    width:60px;

    .transition-all-cubic;
}

.card-wrapper__subtext {
    font-size: 14px;
    letter-spacing: 3px;
}

.card-wrapper__arrow {
    width: 1.6rem;
    height: 1.6rem;
    background-color: white;
    position: absolute;
    z-index: 9;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -7px;
    left: calc((50%) - 8px);
}