JSFiddle - React, Tailwind, and code Playground

HTML

<div id="agenda1"> 
   <div id="titrecontain">LES POM</div>
        <div id="imga">
           <img src="Image/pom_pablo.jpg" width="80%" height="80%" alt="pom">
        </div>
         Dans le cadre de la semaine du développement durable, nous serons présent au centre Pablo Néruda à Bagnolet. Le centre organise une soirée au cours de laquelle .... <br>
	<a href="#popup1"><span class="lire"><img src="Image/liresuite.png" width="10px" height="10px" vertical-align="middle"> Lire la suite</span> </a>


<div id="popup1" class="overlay">
	<div class="popup">
        <a class="close" href="#close">&times;</a>
    <div id="contain">
        <div id="titrecontain">Projection POM</div>
		<br>
		<div id="imgcontain"><img src="Image/pom_pablo.jpg" width="100%" height="100%" vertical-align="top" alt="Pom"></div>
        
     Dans le cadre de la semaine du développement durable, nous serons présent au centre Pablo Néruda à Bagnolet. <br><br>            
            Nous sommes heureux de vous annoncer la projection des POM dans le cadre de la soirée de clôture de la semaine du développement durable du Centre Social et Culturel Pablo Neruda à partir de 18 h au 36, rue Pierre et Marie Curie à Bagnolet. Au cours de cette soirée vous pourrez également voir une représentation théâtrale, avec une collation de disco-smoothies et faire un Graphiteria.  <br>  </div> 
		</div>
    <span id=close></span>

CSS

#containagenda{
width: 68%;
height: 70%;
float: right;
text-align: justify;       
}


#imgcontain{
    width: 30%;
    height: 80%;
    float: left;
    text-align: left; 
    clear: left;
    margin-right: 2%;
}  

#titrecontain{
    font-family: 'champagne__limousinesbold'; 
    font-size: 30px;
    width: 100%;
    margin-bottom: 2%;
    height: 30px;
    color: black;
    text-align: center;
    margin-bottom: 5px;
    color: #fcb731;
    padding-top: 5px
    }



#containmemento{
width: 100%;
height: 100%;
background-position: left top;
background-repeat: no-repeat;
float: left;
}



.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 10% auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
    height: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
float: right;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}
body {padding: 800px 0;}