JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Educãção Ambiental</title>
        <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    </head>
    <body>
        <div id="main"> 
            <div id="logo">
                <a href="index.html"><img src="img/logoofc.png" border="0"></a>
            </div>
            <div id="btinicio">
                <a href="index.html"><img src="img/inicio1.png" border="0" onMouseOver="this.src='img/inicio2.png'" onMouseOut="this.src='img/inicio1.png'"></a>
            </div>
            <div id="btaquecimento">
                <a href="aquecimento.html"><img src="img/aquecimento2.png" border="0" onMouseOver="this.src='img/aquecimento3.png'" onMouseOut="this.src='img/aquecimento2.png'"></a>
            </div>
            <div id="btefeito">
                <a href="efeito.html"><img src="img/efeito1.png" border="0" onMouseOver="this.src='img/efeito2png.png'" onMouseOut="this.src='img/efeito1.png'"></a>
            </div>
            <div id="btea">
                <a href="ea.html"><img src="img/ea2.png" border="0" onMouseOver="this.src='img/ea3.png'" onMouseOut="this.src='img/ea2.png'"></a>
            </div>
            <div id="conteudo">
                <h2> 
                    O planeta pede socorro
                </h2>
                <p>
                    Falta d'água. Falta de energia. Falta de área verde. Tudo isso gerado pela falta de consciência das pessoas. 
                    <br>
                    <br>
                    Estamos começando a sentir o mal que a Terra sente há anos, o elevado uso dos recursos naturais do Planeta está sobrecarregando-o, ultrapassando o limite, e se não respeitado esse limite, o que poderá ocorrer futuramente ?
                </p>
                <p>
                    A reciclagem é uma de várias maneiras que podem ser colocada é prática para solucionar alguns problemas ambientais, é necessário que sempre tenhamos em mente que não devemos jogar...

CSS

body {
    background-image: url(img/fundonew.png);
    background-repeat: repeat-x;
    font-family: Arial;
    background-color: #003013;
}

#main {
    position: absolute;
    top:0px;
    left:50%;
    width: 770px;
    margin-left: -450px;


}

#logo {
    position: absolute;
    top:0px;
    left: -100px;
    width: 150px;
    height: 150px;

}
#btinicio {
    position: absolute;
    top:60px;
    left:340px;
    width: auto;
    height: 33px;
}
#btaquecimento {
    position: absolute;
    top:60px;
    left:470px;
    width: auto;
    height: 33px;
}
#btefeito {
    position: absolute;
    top:60px;
    left:670px;
    width: auto;
    height: 33px;
}
#btea {
    position: absolute;
    top:60px;
    left:810px;
    width: auto;
    height: 33px;
}
#conteudo {
    position: relative;
    top:150px;
    left:2px;
    width:900px;
    height: auto;
    background-color: #bcc1ad;
    color: #0024ff;
}

#conteudo p{
    font-size:20px;
    text-align: justify;
    margin-left: 10px;
    margin-right: 10px; 
}

#footer {
    position:absolute;
    top:950px;
    width: 100%;
}