JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>page info</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.34.1" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	{% load static %}
	<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
	<!--<script type="text/javascript" src="date_heure.js"></script>-->
	<script src="{% static 'date_heure.js' %}"></script>
</head>

<body>
		<h1>Centrale photovoltaïque pédagogique de l'école Villeneuve</h1>
		<br><h3>En ce moment...</h3>
		<span id="date"></span>
		<br><span id="heure"></span>
		<div id = "schema">
			<img src="{% static 'energie-solaire-1.jpg' %}" id="image"/> 
			<img src="{% static 'maison.jpg' %}" id="image2"/> 
			<img src="{% static 'poteaux.png' %}" id="image3"/> 
		</div>
		
</body>

</html>

CSS

h1{
	text-align: center;
	color: #4c7ecc;
	font-size: 35pt;
}

#schema{
	position: relative;
}


#image{
	position: absolute;
	top: 5%;
	width: 25%;
	left: 45%;
}

#image2{
	position: absolute;
	width: 25%;
	top: 10%;
	left: 55%;
}

#image3{
	position: absolute;
	width: 30%;
	top: 80%;
	left: 75%;
}