JSFiddle - React, Tailwind, and code Playground

by scumah

HTML

<div class="job_opening internal"> <span class="rank"></span>
 <span class="shadow"></span>

    <div class="job_wrapper">
        <div class="company_logo"> <a href="#" class="job_opening_suggestion"><img src="http://s3.amazonaws.com/jobandtalent_production/assets/companies/avatars/000/127/687/127687/profile_altran.png?1359715306"></a>

        </div>
        <div class="job_info">
             <h4><a href="#" class="job_opening_suggestion">Ingenieros En Telecomunicaciones</a></h4>

            <ul class="extra_into">
                <li class="company_name">Altran tran y al vino vino filipino ES</li>
                <li class="city">España (Spain)</li>
            </ul>
            <p class="small_description">Perfil. : Buscamos Ingenieros técnicos o superiores en Telecomunicaciones
                con motivación, capacidad de aprender ...</p>
        </div>
        <div class="job_actions"> <a href="#" class="view_offer"><strong>View</strong> Offer</a>

            <form accept-charset="UTF-8"
            class="simple_form apply_job_opening_626511">
                <button class="button apply button light_blue" type="submit"><span>Apply</span>

                </button>
            </form>
        </div>
    </div>
</div>

CSS

* {
    font-family:Helvetica, Arial;
}
.job_opening {
    background: #fff;
    border: 1px solid #DFDFDF;
    border-radius: 3px;
    margin-bottom: 20px;
    moz-border-radius: 3px;
    position: relative;
    webkit-border-radius: 3px;
    width:650px;
    margin:30px auto;
}
.job_opening .job_wrapper {
    overflow: hidden;
    position: relative;
}
.job_opening .job_wrapper .company_logo, .job_opening .job_wrapper .company_logo {
    float: left;
    margin: 12px 0 12px 15px;
    position: relative;
    width: 150px;
}
.job_opening .job_wrapper .company_logo img, .job_opening .job_wrapper .company_logo img {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
    display: block;
    padding: 4px;
    width: 125px;
}
.job_opening .job_wrapper .company_logo .tag, .job_opening .job_wrapper .company_logo .tag {
    font-size: 13px;
    position: absolute;
    right: 12px;
    top: -4px;
}
.job_opening .job_wrapper .job_info, .job_opening .job_wrapper .job_info {
    position:absolute;
    left:170px;
    margin:12px 0;
    width:355px;
}
.job_opening .job_wrapper .job_info h4, .job_opening .job_wrapper .job_info h4 {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    margin-top: 0;
    overflow: hidden;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 360px;
}
.job_opening .job_wrapper .job_info .extra_into, .job_opening .job_wrapper .job_info .extra_into {
    margin-top: 4px;
    overflow: hidden;
}
.job_opening .job_wrapper .job_info .extra_into li, .job_opening .job_wrapper .job_info .extra_into li {
    color: #879299;
    float: left;
    font-size: 12px;
    margin-right: 20px;
    padding: 0 0 0 16px;
}
.job_opening .job_wrapper .job_info .extra_into li.published, .job_opening .job_wrapper .job_info .extra_into li.published {
    background: url(/assets/candidates/ico_suggestion_date.png) 0 -1px no-repeat;
}
.job_opening .job_wrapper .job_info .extra_into li.city,...

JavaScript

$()