JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product">
    <img alt="Product Name" src="/path/to/image.jpg">
    <h4>Product Name</h4>
    <div>
        <p>Some nice content. Lorem ipsum dolor sit amet, consecuteur adipiscing elit.</p>

    </div>
</div>

CSS

p, h4 {
   font-family:Arial, sans-serif;
}

.product {
    -webkit-border-radius:4px;
    -moz-border-radius:4px;    
    -ms-border-radius:4px;    
    -o-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.3);
    -moz-box-shadow:0 0 4px rgba(0,0,0,0.3);    
    -ms-box-shadow:0 0 4px rgba(0,0,0,0.3);    
    -o-box-shadow:0 0 4px rgba(0,0,0,0.3);
    box-shadow:0 0 4px rgba(0,0,0,0.3);
    
}
.product:after {
    display:block; content:''; clear:both;
}

    .product img {

        float:left;
        border:1px solid white;
        outline:1px solid #bbb;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;    
        -ms-border-radius:4px;    
        -o-border-radius:4px;
        border-radius:4px;
        -webkit-outline-radius:4px;
        -moz-outline-radius:4px;    
        -ms-outline-radius:4px;    
        -o-outline-radius:4px;
        outline-radius:4px;
        /* just for example: */ background-color:#ddd;
    }

    .product h4,
    .product div {
        padding-left: 25px;
        margin-left: 25px;
     }
    
    .product h4 {
        margin-top:0;
        margin-bottom:5px;
        background:#ddf;
        font-weight:bold;
    }    
    
    .product div {
        font-size:13px;
        background:#ddd;
    }