JSFiddle - React, Tailwind, and code Playground

HTML

<div class="carre cgris" style="box-shadow: rgba(0, 0, 0, 0.1) 5px 16px 20px;">
		<div class="titrecarre">title</div>
		<div class="carretexte">
			some text<br>
		</div>
		<div class="carreimage img_developpement" style="height:150px">
		</div>
		<div class="carretexte">
			some more text
		</div>
		<div class="carrefooter">
			<a href="inscription" title="Inscription" onclick="FixHTML();return false">make static</a>
		</div>
	</div>
  
  <script>
var allstyles=null;
var allelms=null;
function FixHTML()
{
    if (!allstyles)
    {
        console.log("remove scripts");
        var elms=document.getElementsByTagName('SCRIPT');
        for(var i=elms.length-1;i>-1;i--)
        {
            var elm=elms[i];

            if (elm.tagName=="SCRIPT" && !elm.innerHTML.match(/FixHTML/))
            {
                elm.parentElement.removeChild(elm);
            }
        }

        //sauvegarde des styles
        console.log("save styles");
        allstyles=[];

        allelms=document.getElementsByTagName('*');

        for(i=0;i<allelms.length;i++)
        {
            elm=allelms[i];
            if (!elm.id)
                elm.id="tmpid"+i;
            var id=elm.id;

            allstyles[id]=[];

            var style=getStyleObject(elm);
            for(var key in style)
            {
                allstyles[id][key]=style[key];
            }

            if (elm.className)
                elm.className="";
        }

        console.log("delete stylesheet links");
        elms=document.getElementsByTagName('LINK');
        for(i=elms.length-1;i>-1;i--)
        {
            elm=elms[i];

            console.log(elm.href);
            if (elm.rel="stylesheet")
                elm.href="nowhere";
        }
    }
    setTimeout(RestoreClassStyles,2000);
}

function RestoreClassStyles()
{
    console.log("restore class styles",allstyles);

    allelms=document.getElementsByTagName('*');

    for(var i=0;i<allelms.length;i++)
    {
        var elm=allelms[i];
...

CSS

.carre
{
    width: 265px;
    height: 408px;
    margin: 25px;
    background-position: center;
	
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-flow: column;
    font-size: 15px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
	box-shadow: rgba(0,0,0,0.1) 5px -20px 20px;
}
.carre > div
{
	padding-left:31px;
	padding-right:31px;
	padding-bottom:3px;
	padding-top:2px;
  box-sizing: border-box;
}
.carre .centerimage
{
	text-align:center;
}
.carre .centerimage img
{
	border:1px #fff solid;
	max-width: 97%;
}

.titrecarre
{
	background-color: rgba(255,255,255,0.1);
    width: 100%;
    text-align: center;
}
.cbleu{ background: #2a619c; }
.corange{ background: #e0b40d; }
.cviolet{ background: #a23ea2; }
.cgris{ background: #bfbeb9; }
.crouge{ background: #9c3636; }
.carre .carretexte
{
	text-align:justify;
	padding-top:10px;
	padding-bottom:10px;
}
.carrefooter
{
	text-align:center;
	background: rgba(0,0,0,0.2);
	font-size: 12px;
    width: 100%;
}
.carrefooter a
{
	color:#fff;
}
.carreimage
{
	background-position:center center;
	background-size:cover;
	height:130px;
}