JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div><div class="topPart"><h2><a href="#">Top</a></h2>
  <ul class="first">
    <li><a href="#"><img class="imgOne" src="img/3.gif"></a></li>
    <li><a href="#"><img class="imgOne" src="img/2.gif"></a></li>
    <li><a href="#"><img class="imgOne" src="img/4.gif"></a></li>
    <li><a href="#"><img class="imgOne" src="img/5.gif"></a></li>
    <li><a href="#"><img class="imgOne" src="img/6.gif"></a></li>
    <li><a href="#"><img class="imgOne" src="img/17.gif"></a></li>
    <li><a href="#"><img class="imgOne" src="img/18.gif"></a></li>
    <li><a href="#"><img class="imgOne" src="img/19.gif"></a></li></ul>
  <ul class="second">
    <li ><a href="#"><img class="imgTwo" src="img/11.gif"></a></li>
    <li><a href="#"><img class="imgTwo" src="img/12.gif"></a></ul></li></div></div>

CSS

.body{margin:0 auto;width:100%;clear:both;}
    .topPart{background-color:#7FFFD4;height:220px;width:1264px;margin:0px 0px 0px 0px;overflow: visible;}
    .topPart ul li  {position: relative;list-style:none;float:left;display:inline;}
     .imgOne{height: 120px;width: 120px;border-radius:60px; border-style:solid;border-color:white;margin:-25px 30px 0px -5px;position: relative;}
     .imgOne:hover{border-radius:5%;height: 120px;}
     .imgTwo{height: 120px;width: 120px;border-radius:60px;border-style:solid;border-color:white;position: relative;}