c plus joli

index.html

@@ -10,24 +10,31 @@
     <header>
       <marquee class="text-8xl text-red-400 bg-purple-300">DOMOTIQUE</marquee>
     </header>
-    <section class="flex justify-between mx-20 text-center">
+    <section class="bg-red-300 m-5 py-4">
-      <div class="temperature">
+      <div class="temperature m-5 text-center">
         <h1>Temperature</h1>
-        <p><span id="temp"></span>°C</p>
+        <p class="text-blue-700 text-5xl font-extrabold"><span id="temp"></span>°C</p>
+        <img class="m-auto object-fill w-1/5 h-20" src="./temperature.jpg" alt="lampe">
       </div>
-      <div class="radiateur">
+
+      <div class="flex justify-between mx-20 text-center space-x-4">
+        <div class="radiateur w-full">
           <h1>Radiateur</h1>
           <button id="btn-0" onclick="setLightState(0)">Allumer</button>
+          <img class="m-auto object-fill w-full h-20" src="./radiateur.png" alt="lampe">
         </div>
   
-      <div class="volet">
+        <div class="volet w-full">
           <h1>Volets roulants</h1>
           <button id="btn-1" onclick="setLightState(1)">Allumer</button>
+          <img class="m-auto object-fill w-full h-20" src="./volet.jpg" alt="lampe">
         </div>
   
-      <div class="eclairage">
+        <div class="eclairage w-full">
           <h1>Eclairage</h1>
           <button id="btn-2" onclick="setLightState(2)">Allumer</button>
+          <img class="m-auto object-fill w-full h-20" src="./lampe.jpg" alt="lampe">
+        </div>
       </div>
     </section>
     <script type="module" src="/src/main.js"></script>

src/style.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 button{
-    @apply bg-slate-400 text-red-400;
+    @apply text-2xl p-2 bg-lime-400 text-blue-400 rounded-lg my-5;
 }
 h1{
     @apply text-3xl bg-yellow-300 font-bold text-emerald-500;