JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<h2>Comments</h2>

<a id="comment-8524389"></a>

<div class="comment clearfix">
     <h3 class="comment-title"><a href="/comment/8524389#comment-8524389" class="permalink" rel="bookmark"><span class="element-invisible">Comment </span>#1</a></h3>

    <img src="https://pbs.twimg.com/profile_images/378800000215553318/c31c17caa17fca97290080e6fcc6c423_bigger.jpeg" alt="Mark Carver" />
    
    <p class="submitted"><a href="/user/501638" title="View user profile." class="username">Mark Carver</a></p>
    <p class="date">
        <time pubdate datetime="1393457474">February 26, 2014 at 6:31pm</time>
    </p>
    <div class="content">
        <div class="field field-name-comment-body field-type-text-long field-label-hidden">
            <div class="field-items">
                <div class="field-item even">
                    <blockquote>
                        <p>Likewise #9D9D93 is hard to read on white but #707065 meets WCAG 2.0 AA.</p>
                    </blockquote>
                    <p>It's not hard to read... for me. I need higher hexed grays. Anything around #777 and below tends to all just look the same to me.</p>
                    <p>Having lighter grays allows my eyes/brain's focus not be stolen by usually irrelevant information. I do not need to know the time for every comment. Just who posted it and what they had to say. I understand this isn't WCAG compliant. But does <em>every bit of text</em> on a site have to follow this? Why devalue the importance of displaying meta information in lighter colors just because of WCAG standards?</p>
                </div>
            </div>
        </div>
    </div>
    <ul class="links inline">
        <li class="comment-report first last"><a href="/node/add/project-issue/webmasters?component=Spam&amp;categories=task&amp;title=Spam%20Report&amp;body=Reporting%20the%20following%20comment%20as%20spam%3A%20https%3A//drupal.org/node/936304%23comment-8524389">report spam</a>

        </li>
    </ul>
</div>
<div>
   ...

CSS

body {
    font-family: arial;
}
/**
    * Hide elements visually, but keep them available for screen-readers.
    *
    * Used for information required for screen-reader users to understand and use
    * the site where visual display is undesirable. Information provided in this
    * manner should be kept concise, to avoid unnecessary burden on the user.
    * "!important" is used to prevent unintentional overrides.
    */
 .element-invisible {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}
/**
    * The .element-focusable class extends the .element-invisible class to allow
    * the element to be focusable when navigated to via the keyboard.
    */
 .element-invisible.element-focusable:active, .element-invisible.element-focusable:focus {
    position: static !important;
    clip: auto;
}
h3.comment-title {
    float: right;
}

img {
 float: left;    
    padding: 1em;
}