JSFiddle - React, Tailwind, and code Playground

by krisselden

HTML

<div class="container">
    <div class="y-text-element y_title">Test Elems</div>
    <div class="y-date-element y_date">08.16.2012</div>
    <div class="y-time-with-left-label-element y_time y-bordered-list-item y-text-with-left-label-element">
        <div class="left_label">Time</div>
        <div class="text_content">12:30 PM</div>
    </div><br>
    <div class="y-text-with-left-label-element y_location y-bordered-list-item">
        <div class="left_label">Location</div>
        <div class="text_content">My House</div>
    </div><br>
    <div class="y-text-with-left-label-element y_address y-bordered-list-item mappable">
        <div class="left_label">Address</div>
        <div class="text_content">
            1121 N 82 St Seattle, WA 98109 1121 N 82 St Seattle, WA 98109
        </div>
    </div><br>
    <div class="y-text-with-left-label-element y_website y-bordered-list-item linkable">
        <div class="left_label">Website</div>
        <div class="text_content"><a href="http://www.krisselden.com" target="_blank">www.krisselden.com</a></div>
    </div><br>
    <div class="y-text-element y_extraText">
        The quick brown fox jumps over the lazy dog.<br>
        <br>
        Here is a link: <a href="http://google.com" target="_blank">http://google.com</a>
    </div>
</div>

CSS

.container {
    border: 1px solid transparent;
    width: 320px;
    background: #58585A;
    font-family: Buenard, serif;
    text-align: center;
}

a {color: white;}

.y_title {
    color: #FFD24F;
    text-shadow: 0 2px 1px #363636;
    font-size: 29px;
    line-height: 36px;
    margin: 36px 0 18px;
}

.y_date {
    color: white;
    text-shadow: 0 2px 1px #363636;
    font-size: 16px;
    line-height: 18px;
    margin: 18px 0;
}

.text_content, .y_extraText {
    color: white;
    text-shadow: 0 2px 1px #363636;
    font-weight: 400;
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    text-transform: uppercase;
}

.y_extraText {
    margin: 15px 60px 0 60px;
}

.left_label {
    font-weight: 700;
    color: #FFD24F;
    text-shadow: 0 2px 1px #363636;
    font-size: 15px;
    line-height: 18px;

    display: table-cell;
    padding-right: 10px;
}

.y-text-with-left-label-element {
    display: inline-table;
    width: auto;
    margin: 0 20px;
}

.y-text-with-left-label-element .text_content {
    display: table-cell;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}