JSFiddle - React, Tailwind, and code Playground

by Gaurav Kesarwani

HTML

<ul>
    <li id="featured-app">
        <div class="entity-left">
            <img src="http://postimg.org/image/z6b86b6ml/1b7a73camario.jpeg" />
        </div>
        <div class="entity-middle">
            <a href=""><h3>Toon Link</h3></a>
            <h4>Hero of Time</h4>
            <p>Hyrule| Atheletics</p>
            <p>Phone</p>
            <p>Email: <a href="">[email protected]</a></p>
        </div>
        <div class="entity-right">
            <p>Aug 4th, 2011</p>
            <p>Featured Applicant</p>
        </div>
    </li>
    <li>
        <div class="entity-left">
            <img src="mario.jpeg" />
        </div>
        <div class="entity-middle">
            <a href=""><h3>Toon Link</h3></a>
            <h4>Hero of Time</h4>
            <p>Hyrule| Atheletics</p>
            <p>Phone</p>
            <p>Email</p>
        </div>
        <div class="entity-right">
            <p>Aug 4th, 2011</p>
            <p>Non featured Applicant</p>
        </div>
    </li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
            list-style: none;
            padding-left: 0;
        }

        li {
            background-color: burlywood;
            border-bottom: 1px solid orangered;
        }
        
        li#featured-app:hover {
            background-color: aquamarine;
        }

        p, a, h3 {
            margin: 0;
        }

        .entity-left,
        .entity-middle,
        .entity-right {
            display: inline-block;
            margin-right: -4px;
            vertical-align: top;
        }

        .entity-left,
        .entity-right {
          width: 20%;
        }

        .entity-middle {
          width: 60%;
        }