JSFiddle - React, Tailwind, and code Playground

by andrew rowe

HTML

<aside>
    <ul>
        <li>
            <img src="http://lorempixum.com/100/100/nature/1">
             <h3>Headline</h3>

            <p>Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...</p>
        </li>
        <li>
            <img src="http://lorempixum.com/100/100/nature/2">
             <h3>Headline</h3>

            <p>Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...Lorem ipsum dolor sit amet...</p>
        </li>
        <li>
            <img src="http://lorempixum.com/100/100/nature/3">
             <h3>Headline</h3>

            <p>Lorem ipsum dolor sit amet...</p>
        </li>
        <li>
            <img src="http://lorempixum.com/100/100/nature/4">
             <h3>Headline</h3>

            <p>Lorem ipsum dolor sit amet...</p>
        </li>
    </ul>
</aside>

CSS

* {
    margin: 0;
    padding: 0;
}
div {
    margin: 20px;
}
ul {
    list-style-type: none;
    width: 500px;
}
h3 {
    font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
li img {
    float: left;
    margin: 0 15px 0 0;
}
li p {
    font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
li {
    padding: 10px;
    overflow: auto;
}
li:hover {
    background: #eee;
    cursor: pointer;
}