JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="ribbon-container">
	<img src="http://placehold.it/290x160" alt="">
        <span class="ribbon"><span>Hey, I'm an omlette hee hehehe loremm ipsummm station!</span></span>
</a>

CSS

body {
	padding: 2em;
    font-size: 1em; /* ribbon scales accordingly */
}





.ribbon-container {
	position: relative;
	display: inline-block;
	line-height: 1;
}





.ribbon-container img {
	vertical-align: middle;
}





.ribbon {
	position: absolute;
    display:block;
	bottom: 1em;
	left: 0;
	margin-right: 1em;
	padding: .75em 1.25em .75em .75em;
	border-radius: 0 .5em .5em 0;
	background-color: #39f;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 100%);
	box-shadow: inset 0 .062em 0 rgba(255,255,255,.6), 0 .125em .25em rgba(0,0,0,.2);
	color: #fff;
	text-shadow: 0 -.062em 0 rgba(0,0,0,.2);
	white-space: nowrap;
	transition: background-color .2s ease-in-out;
    width:85%;
   	width: calc(100% - 3em);
    
}
.ribbon span{
    display:block;
    overflow:hidden;
    text-overflow: ellipsis;
}
.ribbon:before,
.ribbon:after {
	position: absolute;
	background-color: inherit;
	content: "";
}

.ribbon:before {
	bottom: 0;
	left: -.5em;
	width: .5em;
	height: 3em;
	border-radius: 0 0 0 .5em;
	background-image: linear-gradient(to right, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%);
}

.ribbon:after {
	top: -1em;
	left: -.5em;
	width: .5em;
	height: 1em;
	border-radius: .5em 0 0 .5em;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%);
	box-shadow: 0 .062em 0 rgba(255,255,255,.6);
}




.ribbon-container:hover .ribbon {
	background-color: #7acc29;
    overflow:visible;
    width:auto;
}