JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
    What's New in TrackTech Mobile
</h1>

<div class="release">
    <p class="date">1.8.3 (March 21, 2018)</p>
    <ul>
        <li class="new">
            Adds ARS, Seal Photo, and QC Sheet types to the Add Attachment action.  This is supported by a new dynamic types feature under the hood.
        </li>
        <li class="new">
            Add attachments to Clients.  Supports Compliance Document, Contract Document, General Attachment, or Photo types.
        </li>
        <li class="new">
            “What's New” button on the Actions screen shows the latest changes.
        <li class="new">
            Updates the Analytics and CrashReporter framework.
        </li>
        <li class="new">
            TrackTech can prompt you when it has an update available.  You should always accept the update.
        </li>
        <li class="note">
            Devices will now show the Home screen if the Home button is depressed when running TrackTech.  This is an intentional change to facilitate updating.
        </li>
        <li class="fixed">
            Sample text for future.
        </li>
        <li class="removed">
            Sample text removed sample sample.
        </li>
    </ul>
</div>

<div class="release">
    <p class="date">1.8.3 (March 21, 2018)</p>
    
</div>

CSS

html {
    font-size: 10px;
}

body {
    font-family: '-apple-system', BlinkMacSystemFont, 'Helvetica Neue', Arial, Tahoma, sans-serif;
    color: #333;
    font-size: 1.5rem;
}

h1 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 2.2rem;
    text-align: center;
}

.release {
    border-bottom: 1px solid #eee;
    margin-bottom: 1.8em;
}

.date {
    font-weight: 500;
    margin: 0;
    color: #999;
    text-transform: uppercase;
    font-size: 1.4rem;
}

ul {
    padding-left: 0;
}

ul > li {
    position: relative;
    padding-left: 4em;
    margin-bottom: 0.5em;
}

.new::before, .fixed::before, .removed::before, .note::before {
    display: inline-block;
    text-transform: uppercase;
    width: 5em;
    background: red;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    padding: 0.3em 0.2em;
    position: absolute;
    left: 0;
    top: 0.15em;
}

.new::before {
    content: 'New';
    background-color: #03a1e2;
}

.fixed::before {
    content: 'Fixed';
    background-color: #65be3c;
}

.removed::before {
    content: 'Removed';
    background-color: #d91e19;
}

.note::before {
    content: 'Note';
    background-color: gray;
}