JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://uploads.easy-sharing.net/test2/index_files/bootstrap.css">

    <div id="more_button_without">
        <div id="more_button_without_container">
            <div id="link_without"></div>	<a href="#"   id="more_link">En savoir plus</a>

        </div> 
    </div>
    </div>

CSS

body 
{
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: "Trebuchet MS";
	background: url('http://static.easy-sharing.net/img/home/background.png');
}

#more_button_without
{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 40px;
	background-color: rgba(33, 64, 137, 0.6);
}

#more_button_without_container #link_without
{
	width: 150px;
	height: 0;
	float: right;
	position: relative;
	top: -25px;
	right: 100px;
	border-bottom: 25px solid rgba(33, 64, 137, 0.6);
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
}

#more_button_without_container a 
{
	float: right;
	position: relative;
	left: 50px;
	top: -10px;
	color: white;
	text-decoration: none;
}

#more_button_with
{
	display: hidden;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 97%;
	/*background-color: rgba(33, 64, 137, 0.6);*/
	color: white;
    padding-top:30px;
}
#more_button_with_container{
    width: 100%;
	height: 97%;
	background-color: rgba(33, 64, 137, 0.6);
}

#more_button_with_container #link_with
{
	width: 150px;
	height: 0;
	float: right;
	position: relative;
	top: -25px;
	right: 100px;
	border-bottom: 25px solid rgba(33, 64, 137, 0.6);
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
}


 
#more_button_with_container a 
{
	float: right;
	position: relative;
	left: 50px;
	top: -10px;
	color: white;
	text-decoration: none;
}