JSFiddle - React, Tailwind, and code Playground

by mjgasner

HTML

<div id="recently-viewed">
        <h3>Your Recently Viewed Items</h3>
        <ul>
            <li class="left"><div class="arrow"></div></li>
            <li class="ships-free product">
                    <dl>
                        <dt><img src="http://www.calleynye.com/exteriorsolutions/img/whitehall_arch_marker.jpg" alt="" /></dt>
                        <dd>
                            <ul class="product-details">
                                <li class="product-name">Whitehall Arch Marker Standard Address Plaque</li>
                                <li class="sku">SKU: 1003</li>
                                <li class="price">Starting at $84.99</li>
                            </ul>
                        </dd>
                    </dl>
                </li>
                <li class="ships-free on-sale product">
                    <dl>
                        <dt><img src="http://www.calleynye.com/exteriorsolutions/img/product_img3.jpg" alt="" /></dt>
                        <dd>
                            <ul class="product-details">
                                <li class="product-name">Whitehall Arch Market Standard Address Plaque</li>
                                <li class="sku">SKU: 1003</li>
                                <li class="price">Starting at <span>$84.99</span></li>
                                <li class="sale-price">On Sale $74.99</li>
                            </ul>
                        </dd>
                    </dl>
                </li>
                <li class="ships-free on-sale product">
                    <dl>
                        <dt><img src="http://www.calleynye.com/exteriorsolutions/img/product_img3.jpg" alt="" /></dt>
                        <dd>
                            <ul class="product-details">
                                <li class="product-name">Whitehall Arch Market Standard Address Plaque this is a really long title someone should tell someone</li>
                                <li...

CSS

li.product{
    float: left;
    width: 175px;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    position: relative;
}
    li.product ul li.product-name {
        color: #254c73;
    }
    
    li.product ul li.sku {
        color: #eb1f16;
        font-weight: normal;
    }
    
    li.product ul li.price {
        color: #6c6a6a;
    }
        li.product ul li.price span {
            text-decoration: line-through;
        }
    
    li.product ul li.sale-price {
        color: #219107;
    }
    

#customers-bought,
#recently-viewed {
    width: 1000px;
    min-height: 272px;
    margin: 10px 20px;
    background: url(http://www.calleynye.com/exteriorsolutions/img/cont_bg.png) repeat;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 12px;
    border: 1px #d8d8d8 solid;
    position: relative;
    /*overflow: auto;*/
}

    #customers-bought h3,
    #recently-viewed h3 {
        display: block;
        float: left;
        width: 170px;
        background: url(http://www.calleynye.com/exteriorsolutions/img/ribbon.png);
        margin: -7px -19px 0;
        position: absolute;
        padding: 7px 0 0 8px;
        letter-spacing: 50%;
        color: #fff;
        text-shadow: -1px 1px 0px rgba(000,000,000,0.5);
        font-size: 11px;
        z-index: 100;
    }
    
    #customers-bought>ul,
    #recently-viewed>ul {
        padding: 35px 10px 0 ;
        background: #fff;
        width: 100%;
        float: left;
        clear: both;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    
    #customers-bought li.product,
    #recently-viewed li.product {
        padding: 0;
        margin: 0 1px;
    }
    
    #customers-bought>ul>li,
    #recently-viewed>ul>li {
        float: left;
    }
    
    #customers-bought li.left,
   ...