JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.datanordar.se/s/f81d4/css/style.css">
<div class="job_list_container" id="jobs">
    <ul class="job_list">
        <li class="job_box">okay</li>
    </ul>
</div>

CSS

body{
    margin: 10px;
}
li.job_box, li.job_box:hover{
    background: transparent;
}
li.job_box .wrap {
    background: #e8e5e1;
    width: 418px;
    height: 148px;
    border: 1px solid #FFF;
    position: relative;
    display:block;
}
li.job_box .wrap:hover {
    background: #f2efec;
}
li.job_box .wrap::before{
    content: " ";
    position: absolute;
    z-index: -10;
    bottom: 0px;
    left: 5%;
    width: 90%;
    height: 10px;
    -moz-border-radius: 125px / 12px;
    -webkit-border-radius: 125px / 12px;
    border-radius: 125px / 12px;
    -moz-box-shadow: 0 0 10px #555;
    -webkit-box-shadow: 0 0 10px #555;
    box-shadow: 0 0 10px #555;
}
li.job_box .wrap:hover::before{
    -moz-box-shadow: 0 0 10px #000;
    -webkit-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
}

JavaScript

var clone = $('li.job_box').clone();
$('#archive_button').click(function(e){
    e.preventDefault();
    clone.clone().hide()
        .appendTo('ul.job_list').fadeIn('slow');
});