JSFiddle - React, Tailwind, and code Playground

by Michael Nally

HTML

<div class="tpd-listing">
    <div class="tpd-listing-icon">
        <img src="http://placehold.it/150x150" />
    </div>
    <ul>
        <li><a href="#">PRODUCT NAME</a>
        </li>
        <li><a href="#">Manufacturer Name</a>
        </li>
    </ul>
</div>
<div class="tpd-listing">
    <div class="tpd-listing-icon">
        <img src="http://placehold.it/150x150" />
    </div>
    <ul>
        <li><a href="#">MANUFACTURER NAME</a>
        </li>
    </ul>
</div>
<div class="tpd-listing">
    <div class="tpd-listing-icon">
        <img src="http://placehold.it/150x150" />
    </div>
    <ul>
        <li><a href="#">SUPPLIER NAME</a>
        </li>
    </ul>
</div>

CSS

.tpd-listing {
    border:1px dotted #222;
    position:relative;
    width:150px;
    padding:10px;
    max-weight:auto;
    max-height:auto;
    overflow:hidden;
    margin:10px;
}
.tpd-listing-icon {
    position:relative;
    float:left;
    width:150px;
    height:150px;
}
.tpd-listing-img img {
    width:100%;
}
.tpd-listing ul {
    position:relative;
    float:left;
    width:150px;
    border:1px dotted #f2f;
    list-style-type:none;
    margin:10px 0 0 0;
    padding:0;
}
#tpd-listing ul li a {
    text-decoration:none;
}