JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<ul class="list">
<a href="loja">
<li>
<img src="images/icon.jpg" title="" alt="" />
<section class="list-left">
<h5 class="title">Loja de doces (exemplo)</h5>
</section>
<section class="list-left">
<span class="catpath1">Telefone :</span>
<span class="catpath">(99) 9999-9999</span>
</section>
<section class="list-left">
<span class="catpath1">Endereço :</span>
<span class="catpath">R blablabla, 222</span>
</section>
<section class="list-right">
<span class="cityname">(url do maps ja inserida aqui e não precisa aparecer para o usuário)</span>
<span class="cityname">(LOCALIZAÇÃO EM KM AQUI)</span>
<span class="cityname">Curitiba-PR</span>
</section>
<div class="clearfix"></div>
</li> 
</a>
</ul>
</div>

CSS

#container .list li:hover {
    background: #fff;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

#container .list li {
    background: #F9F9F9;
    margin-bottom: 30px;
    padding: 20px;
    list-style-type: none;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
    box-shadow: 0 0 0.6em #ccc;
    -webkit-box-shadow: 0 0 0.6em #ccc;
    -o-box-shadow: 0 0 0.6em #ccc;
    -moz-box-shadow: 0 0 0.6em #ccc;
    -ms-box-shadow: 0 0 0.6em #ccc;
}
div#myTabContent {
    border: 1px solid #CCCCCC !important;
    padding: 15px;
    position: relative;
}
container .list li .title {
    overflow: hidden;
    word-wrap: break-word;
    font-size: 28px;
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    letter-spacing: 1px;
    font-weight: 700;
}

h5.title {
    overflow: hidden;
    word-wrap: break-word;
    font-size: 20px;
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    letter-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    font-family: "comic sans", Courier new, monospace;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}
span.catpath {
    margin-top: 30px;
    font-weight: 600;
    font-size: 16px;
    color: black;
}
span.catpath1 {
    margin-top: 30px;
    font-weight: 600;
    font-size: 16px;
    display: inline-block;
    color: red;
}

#container .list li .list-right {
    text-align: right;
}
#container .list li .cityname {
    display: block;
    color: #404040;
}

span.cityname {
    display: block;
    color: #404040;
}