JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="modules">
    <li>
        <h3>Specs</h3>
        <div class="content">
            <p>Last revision:</p>
            <dl class="pairDefinition">
                <dt>Processor</dt>
                <dd>Core i5</dd>
                <dt>RAM</dt>
                <dd>8GB</dd>
                <dt>Hard Drive</dt>
                <dd>512GB</dd>
            </dl>
        </div>
    </li>
    <li>
        <h3>Review record</h3>
        <div class="content">
            <p>You haven't set a review. <a href="bla">Schedule a revision</a></p>
        </div>
    </li>
    
    <li>
        <h3>Owner details</h3>
        <div class="content">
            <dl class="pairDefinition">
                <dt>Name</dt>
                <dd>&Oacute;scar L&oacute;pez Acu&ntilde;a</dd>
                <dt>Country</dt>
                <dd>Costa Rica</dd>
                <dt>State</dt>
                <dd>All of them</dd>
                <dt>ZIP code</dt>
                <dd>I like RAR better</dd>
            </dl>
            <a href="bla2" class="line">Update your personal information</a>
        </div>
    </li>
    
    <li>
        <h3>Your accounts</h3>
        <div class="content">
            <p> There are 2 messages from Yahoo, 1 from Lumosity and 5 from Tweetland</p>
            <ul class="listSeparated line">
                <li>
                    <dl class="pairDefinition">
                        <dt>Yahoo</dt>
                        <dd><a href="#">Account Details</a></dd>
                        <dt>Email</dt>
                        <dd>blabisbla@yahoo.com</dd>
                    </dl>
                </li>
                <li>
                    <dl class="pairDefinition">
                        <dt>Lumosity</dt>
                        <dd><a href="#">Account Details</a></dd>
                        <dt>Username</dt>
                        <dd>ilovetheiradds</dd>
                    </dl>
                </li>
                <li>
                    <dl...

CSS

body {
    font-family: 'Segoe UI', Calibri, sans-serif;
}

h3 {
    background: #E0EAEF;
    border-radius: 3px;
    box-shadow: 0 0 2px 1px #DDD;
    color: #99AABF;
    font-weight:bold;
    letter-spacing:0.2em;
    padding: 0.5em;
    margin:0.2em;
    text-shadow: 0 0 2px #EEE;
    text-transform: uppercase;
}

#modules > li {
    background: #F0F5FF;
    box-shadow: 0 0 5px 2px #E0E6FF;
    border-radius: 2px;
    float: left;
    font-size: 80%;
    padding: 2.5%;
    margin: 2.5%;
    width: 35%;
    height: 230px;
}

.content {
    padding-top: 1em;
}

.line {
    display:block;
    clear:both;
    overflow: hidden;
}

.pairDefinition dt, .pairDefinition dd {
    display: inline-block;
    float: left;
}

.pairDefinition dt {
    clear: left;
    margin-right: 0.5em;
    font-weight: bold;
}

.pairDefinition dt:after {
    content: ':';
    font-weight: bold;
}
.listSeparated li {
    border-bottom: solid 1px #CCE;
    margin-bottom:0.5em;
    overflow: hidden;
    padding-bottom: 0.5em;
}