JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cursos">
    <div>
        <h3>Cursos X</h3>
        <hr>
        <p> Total de Alunos : 32 </p>
        <p> Professor : Paulo Junqueira </p>
        <p> Data de Iniicio : 20/01/2016 </p>
        <p> Data de Encerramento : 12/11/2017 </p>
    </div>
</div>

CSS

.cursos div{
        background-color: #00cc99;
        width:calc(46% - 4% - 16px);
        margin:2%;
        float: left;
        color:white;
        padding: 2%;
        border: 4px solid #ddd;
        text-shadow: #00cc99 1px 1px 12px;
        border-radius: 5px;
        position:relative;
        cursor:pointer;
    }
    .cursos p{
        font-family: "open sans";
    }
    .cursos hr{
        border: 1px solid #fff;
    }
    .cursos span{
        background-color: rgba(0,0,0,0.5);
        position:absolute;
        top:0;
        left:0; 
        display:flex;
        align-items:center;
        justify-content: center;
        display:none;
    }

JavaScript

$(document).ready(function(){
        var div_h = $('.cursos div:eq(0)').innerHeight();
        
        $('.cursos div').append('<span></i>EDITAR</span>');
        $('.cursos span').css('width',$('.cursos div').innerWidth());
        $('.cursos span').css('height',div_h);
        $('.cursos div').on('mouseenter',function(){
            //alert();
            $(this).find('span').slideDown();
            $(this).find('span').css({'display':'flex','align-items':'center','justify-content':'center'});
            $(this).on('mouseleave',function(){
                $(this).find('span').slideUp();
            });
        });
        
    });