JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<div class="mn-cards-list">
    <article class="mn-card">
        <div class="mn-card-media">
            <div class="mn-card-media-box">
                <div class="mn-card-media-left"></div>
                <div class="mn-card-media-main"></div>
            </div>
        </div>
        <div class="mn-card-body"></div>
        <hr class="mn-section-break" />
        <div class="mn-action-section"></div>
    </article>
</div>

CSS

body {
    background-color: #F0F1F2;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.4);
}
.mn-cards-list {
    padding: 8px 14px 14px 14px;
}
.mn-card {
    border: 1px solid #CFD4D9;
    cursor: pointer;
    position: relative;
    font-size: 15px;
    line-height: 17px;
    background-color: #FFF;
    white-space: normal;
}
.mn-card .mn-card-media {
    padding: 14px;
}
.mn-card .mn-card-mdeia-box {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
.mn-card .mn-card-body {
    padding: 14px;
    padding-top: 0;
}
.mn-card hr.mn-section-break {
    border: 0;
    border-top: 1px solid #ECEEF0;
    margin: 0;
}
.mn-card .mn-action-section {
    padding: 14px;
}