JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<a href="#oModal"><i class="fa fa-eye orange btn"></i> Ouvrir</a>
  <div id="oModal" class="oModal">
    <div>
      <p><a href="#fermer"><i class="fa fa-eye-slash orange btn"></i></a></p>
      <div class="cv_header">
        <h1>CV</h1>
      </div>

      <div class="section_cv">
        <div class="photo_cv">
          <img src="https://dummyimage.com/60x40/&text=LOGO" alt="Photo de profil">
        </div>
        <div class="prez">
          <h2>Qui suis-je ?</h2>
          <p>NYS texte.</p>
        </div>
        <div class="cadre_diapo">
          <div tabindex="0" class="description a"><span>description1</span><img src="https://dummyimage.com/60x40/000/fff" alt></div>
          <div tabindex="0" class="description b"><span>description2</span><img src="https://dummyimage.com/60x40/f00/0ff" alt></div>
          <div tabindex="0" class="description c"><span>description3</span><img src="https://dummyimage.com/60x40/00f/f0f" alt></div>
          <div tabindex="0" class="description d"><span>description4</span><img src="https://dummyimage.com/60x40/0f0/ff0" alt></div>
          <ul class="navigation_diapo">
            <li class="a"><a href="#votre_id1"><img src="https://dummyimage.com/600x400/000/fff" alt></a></li>
            <li class="b"><a href="#votre_id2"><img src="https://dummyimage.com/600x400/f00/0ff" alt></a></li>
            <li class="c"><a href="#votre_id3"><img src="https://dummyimage.com/600x400/00f/f0f" alt></a></li>
            <li class="d"><a href="#votre_id4"><img src="https://dummyimage.com/600x400/0f0/ff0" alt></a></li>

          </ul>
        </div>
      </div>

CSS

.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
  overflow-y: auto;
}

.oModal:target {
  opacity: 1;
  pointer-events: auto;
}

.oModal:target>div {
  margin: 5% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.oModal>div {
  max-width: 60%;
  max-height: 70vh;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: white;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  overflow-y: auto;
}

.navigation_diapo {
  position: relative;
  grid-column: 1/-1;
  margin: auto;
  overflow: hidden;
  padding: 0
}

.navigation_diapo li {
  position: relative;
  z-index: 1
}

.navigation_diapo li:not(:first-of-type) {
  position: absolute;
  top: 0;
  z-index: 0;
  opacity: 0.5;
  left: 100%;
  transition: 0.25s
}

.cadre_diapo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
}

.a:focus~.navigation_diapo li.a,
.b:focus~.navigation_diapo li.b,
.c:focus~.navigation_diapo li.c,
.d:focus~.navigation_diapo li.d {
  z-index: 2;
  left: 0;
  opacity: 1
}

:focus {
  outline: solid 5px red;
}