JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<div  class="footernav">
<a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
</a>
    
    <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
 </a>       
        <a href="#">
<figure>
<img src="http://lorempixel.com/234/234/fashion">
<figcaption>
<h3>Stella Mccartney</h3>
<span><s>225.95</s> $135.57</span>
</figcaption>
</figure>
            </a>
    </div>

CSS

body {background:#ccc;padding:50px}


.footernav a {text-decoration:none}
.footernav figure {
    float:left;padding-top:28px;
padding-bottom:28px;
margin-right:72px;
width:238px;border:1px solid red; text-align:center
}

.footernav figure:last-child {margin-right:0;}
.footernav img {margin-bottom:20px; border-radius:10px}
.footernav figure:hover img, .footernav figure:active img {border:2px solid black;border-radius:10px }

.footernav h3 {color:#000}
.footernav span {color:#f73ea5}
.footernav s {color:#666}