JSFiddle - React, Tailwind, and code Playground

by Andreu

CSS

section.collection.products.layout-a>.item {
    border-bottom: 1px solid #808080;
}
section.collection.products.layout-a>.item>div.table {
    display: table;
    width: 100%;
}
section.collection.products.layout-a>.item:nth-child(even)>div.table {
    direction: rtl;
}
section.collection.products.layout-a>.item>div.table>div.table-row {
    display: table-row;
    width: 100%;
}

section.collection.products.layout-a>.item>div.table>div.table-row>a:nth-child(1) {
    width: 45%;
    padding-right: 2vw;
    text-align: left;
}

section.collection.products.layout-a>.item:nth-child(even)>div.table>div.table-row>* {
    direction: ltr;
}

section.collection.products.layout-a>.item>div.table>div.table-row>* {
    display: table-cell;
    vertical-align: top;
}

button, a[href], input[type=submit], [data-click-trigger], .clickable {
    cursor: pointer;
    background-color: transparent;
}

.v-padding {
    padding-top: 2rem;
    padding-bottom: 2rem;
}


section.collection.products.layout-a>.item>div.table>div.table-row>a:nth-child(1)>img {
    width: 100%;
    min-height: 8rem;
}

[data-lazy-load-status=final] {
    filter: initial;
    transition: opacity .3s,filter .3s;
    -o-transition: opacity .3s,filter .3s;
    -moz-transition: opacity .3s,filter .3s;
    -webkit-transition: opacity .3s,filter .3s;
}

section.collection.products.layout-a>.item>div.table>div.table-row>a:nth-child(1)>p {
    margin-top: 1rem;
    line-height: 1.6em;
    font-size: 1.1rem;
}