JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<ul>
  <li tabindex="0">
<img class="coh-image lazy-load-img coh-ce-cpt_duplicate_of_new_gallery_com-1b3883552 coh-ce-cpt_duplicate_of_new_gallery_com-1b388355 coh-image-responsive-xs" src="https://picsum.photos/200/300"></li>
  <li tabindex="0">
<img class="coh-image lazy-load-img coh-ce-cpt_duplicate_of_new_gallery_com-1b3883552 coh-ce-cpt_duplicate_of_new_gallery_com-1b388355 coh-image-responsive-xs" src="https://picsum.photos/200/300"></li>
  <li tabindex="0">
    <img class="coh-image lazy-load-img coh-ce-cpt_duplicate_of_new_gallery_com-1b3883552 coh-ce-cpt_duplicate_of_new_gallery_com-1b388355 coh-image-responsive-xs" src="https://picsum.photos/200/300">
  </li>
</ul>

CSS

ul li {
   list-style-type:none;
   display: flex;
   width:200px;
   height:200px;
   gap:10px;
   margin-bottom:30px;
 }
 
 li {
   outline: 10px solid transparent;
 }
 li:focus{
   outline: 10px solid red;
   outline-offset: -6px;
 }
 li img {
   width:100%;
   object-fit:cover;
 }
 body {
   background-color:#fff;
 }